56 lines
1.3 KiB
HTML
56 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="slider" class="slider">
|
|
<div class="thumb"></div>
|
|
</div>
|
|
|
|
<script>
|
|
let thumb = slider.querySelector('.thumb');
|
|
|
|
thumb.onmousedown = function(event) {
|
|
event.preventDefault(); // prevent selection start (browser action)
|
|
|
|
let shiftX = event.clientX - thumb.getBoundingClientRect().left;
|
|
// shiftY not needed, the thumb moves only horizontally
|
|
|
|
document.addEventListener('mousemove', onMouseMove);
|
|
document.addEventListener('mouseup', onMouseUp);
|
|
|
|
function onMouseMove(event) {
|
|
let newLeft = event.clientX - shiftX - slider.getBoundingClientRect().left;
|
|
|
|
// the pointer is out of slider => lock the thumb within the bounaries
|
|
if (newLeft < 0) {
|
|
newLeft = 0;
|
|
}
|
|
let rightEdge = slider.offsetWidth - thumb.offsetWidth;
|
|
if (newLeft > rightEdge) {
|
|
newLeft = rightEdge;
|
|
}
|
|
|
|
thumb.style.left = newLeft + 'px';
|
|
}
|
|
|
|
function onMouseUp() {
|
|
document.removeEventListener('mouseup', onMouseUp);
|
|
document.removeEventListener('mousemove', onMouseMove);
|
|
}
|
|
|
|
};
|
|
|
|
thumb.ondragstart = function() {
|
|
return false;
|
|
};
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|