JSFiddle - React, Tailwind, and code Playground

by Nickolay Ilchenko

HTML

<div class="slider__wrapper">
    <div class="slider"> 
        <a class="slider__handle" href="#"></a>
    </div>
</div>

CSS

.slider {
    background-color: #e3e3e3;
    width: 300px;
    height: 20px;
    position: relative;
    margin: 5px;
}
.slider__wrapper {
    margin: 30px 10px;
}
.slider__handle {
    width: 10px;
    height: 30px;
    background-color: #4679bd;
    position: relative;
    left: 0;
    top: -5px;
    display: block;
}

JavaScript

var slider = document.querySelector('.slider');
var sliderHandle = document.querySelector('.slider__handle');

sliderHandle.onmousedown = function (event) {
    var self = this,
        coords = getCoords(this),
        shiftX = event.pageX - coords.left,
        sliderCoord = getCoords(slider);

    moveAt(event);

    document.onmousemove = function (event) {
        moveAt(event);
    }

    document.onmouseup = function (event) {
        document.onmousemove = document.onmouseup = null;
    }

    function moveAt(event) {
        var leftPos = event.pageX - shiftX - sliderCoord.left;
        
        if(leftPos < 0) {
            leftPos = 0;
        }
        
       var rightEdge = slider.offsetWidth - sliderHandle.offsetWidth;
        if(leftPos > rightEdge){
            leftPos = rightEdge;
        }
        
        sliderHandle.style.left = leftPos + 'px';
    }
}

sliderHandle.ondragstart = function () {
    return false;
}

// === Получение координат элемента относительно документа ===
function getCoords(elem) {
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docElem = document.documentElement;

    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

    var clientTop = docElem.clientTop || body.clientTop || 0;
    var clientLeft = docElem.clientLeft || body.clientLeft || 0;

    var top = box.top + scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return {
        top: Math.round(top),
        left: Math.round(left)
    };
}