JSFiddle - React, Tailwind, and code Playground

by blesh

HTML

<div class="range-slider">
    <div class="range-slider-caret"></div>
    <div class="range-slider-caret"></div>
</div>

CSS

.range-slider {
    position: relative;
    width: 200px;
    height: 5px;
    background: gray;
}
.range-slider-caret {
    position: absolute;
    width: 15px;
    height: 30px;
    background: #ccc;
    top: -13px;
}

JavaScript

var rangeSliders = document.getElementsByClassName('range-slider');

function forEach(coll, fn) {
    Array.prototype.forEach.call(coll, fn);
}

forEach(rangeSliders, function (rangeSlider) {
    var current = rangeSlider.firstElementChild,
        movingCaret;
    while (current) {
        if (current.className.indexOf('range-slider-caret') !== -1) {
            setupCaret(current);
        }
        current = current.nextElementSibling;
    }
});

function setupCaret(caret) {
    caret.addEventListener('mousedown', function (e) {
        var down = true,
            upHandler,
            moveHandler;
        movingCaret = e.target;

        document.addEventListener('mouseup', upHandler = function (e) {
            down = false;
            document.removeEventListener('mouseup', upHandler);
            upHandler = null;
            if (moveHandler) {
                document.removeEventListener('mousemove', moveHandler);
                moveHandler = null;
            }
        });
        
        document.addEventListener('mousemove', moveHandler = function (e) {
            if (down) {
                movingCaret.style.left = e.clientX + 'px';
            }
        });
    });
}