JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Main">
    <div id="Inner"></div>
</div>
<span></span>

CSS

#Main {
    width: 350px;
    height: 20px;
    border: 1px solid red;
    backgroound: gray;
}

#Inner {
    width: 20px;
    height: 20px;
    background: green;
}

JavaScript

var handler = function (e,ui) {
    var value = (jQuery(this).offset().left - $("#Main").offset().left),
        prc   = value / ($("#Main")[0].offsetWidth / 100);
    
    if(prc < 50) {
        prc = Math.floor(prc/10);
    }
    
    
    $("span").text(Math.floor(prc));
};

jQuery(function(){
    $("#Inner").draggable({
        axis: "x",
        containment: "parent",
        drag: handler
    });
});