Currently working on a custom slider and encountering an issue. When quickly moving the mouse outside the slider's range horizontally, exceeding its width, the slider doesn't smoothly transition to minimum or maximum values. Instead, there seems to be a pause. Is there a way to fix this and achieve a seamless slide?
Caton effect https://i.stack.imgur.com/wLFQq.gif
const elWrap = document.getElementById('wrap');
const elProgress = document.getElementById('progress');
function onMouseMove(event) {
const {clientX} = event
const {left, right} = elWrap.getBoundingClientRect()
// is the mouse inside the wrap?
if (clientX < left || clientX > right) return
// set progress width
elProgress.style.width = `${(clientX - left) / elWrap.offsetWidth * 100}%`
}
// slider mousedown events
elWrap.addEventListener('mousedown', function () {
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', function () {
window.removeEventListener('mousemove', onMouseMove);
}, {once: true});
});.x {
padding: 128px;
}
#wrap {
border-radius: 999px;
width: 320px;
height: 12px;
background-color: #ccc;
cursor: pointer;
}
#progress {
height: 12px;
width: 50%;
border-radius: 999px;
background-color: blue;
}<div class="x">
<div id="wrap">
<div id="progress"></div>
</div>
</div>