JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scroller" style="position:relative">scroller</div>
<div id="bar" style="width:300px;border-top: 1px solid black"></div>
<div id="debug">3</div>

JavaScript

$(document).ready(function() {
    var barWidth = $("#bar").width();
                $("#debug").html(JSON.stringify(barWidth, undefined, 4));
    var mouseDown = false;

    $(document).mousedown(function() {
        mouseDown = true;
    });
    $(document).mouseup(function() {
        mouseDown = false;
    });

    $(document).on("mousemove", function(e) {
        if (mouseDown) {
            if (e.pageX >= barWidth) {
                $("#debug").html(JSON.stringify(e.pageX, undefined, 4));
                $("#scroller").css("left", barWidth);
            } else {
                $("#debug").html(JSON.stringify(e.pageX, undefined, 4));
                $("#scroller").css("left", e.pageX);
            }
        }
    });
});