JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bgr"> <div id="bar">  <div id="knob"></div> </div> </div>

<!-- Remove form. Form just to check values --> 
<form>
    <br />
    Mouse x pos: <input id="x" type="text" value="" /><br />
    Pixel step: <input id="c" type="text" value="" /><br />
    Number of Steps: <input id="v" type="text" value="" />
</form>

CSS

#bar{
   margin-left: 50px;
   background: Bisque;
}
#knob{
    background: #C7002E;
    cursor: pointer;
}
.bgr{
    padding-top: 30px;
    background: #F96191;
    width: 400px;
    height: 50px;
}

JavaScript

var posX = 0,
    startPos = 0,    // Set startPosition of knob   
    step = 10,        // Change to Nr of steps you like
    barW = 200,        // Change to your width
    knobW = 16,        // Change height on bar and knob
    s = 0;             // s will go from 0 to max-step-value 

    // Use "s" when you like to change something

$('#knob')  .css('width', knobW)
            .css('height', knobW)
            .css('border-radius', knobW/2+'px')
            .css('-moz-border-badius', knobW/2+'px')
            .css('-webkit-border-radius', knobW/2+'px');

$('#bar')   .css('width', barW)
            .css('height', knobW)
            .css('border-radius', knobW/2+'px')
            .css('-moz-border-badius', knobW/2+'px')
            .css('-webkit-border-radius', knobW/2+'px');  

// If start position is set
// startPos must be more then ( knobW / 2 )
// startPos must be less then ( barW - knob / 2 )
if (startPos > knobW/2 && startPos <= barW-knobW/2) {
    $('#knob').css('marginLeft', startPos-knobW/2 );
    s = Math.round(startPos / ((barW-knobW) / step));
    $('#v').val(s); // remove when done
}


$('#bar').mousedown(function(){
    $(window).mousemove(function(e){
        
var zero = $('#bar').offset().left - $(window).scrollLeft(),
    posX = e.clientX - zero,
    pixStep = (barW-knobW) / step;
    

// Rais and lower step when move knob. ( 0 to step-max-value )
if(posX < 0)                     { s = 0; } 
else if ( barW-knobW >= posX )   { s = Math.round(posX/pixStep); }
else                             { s = step; }

// Position knob on bar
if (posX <= knobW/2) { 
    $('#knob').css('marginLeft', 0 ); }
else if ( posX <= barW - knobW/2 ) { 
    $('#knob').css('marginLeft', posX-knobW/2); } 
else { 
    $('#knob').css('marginLeft', barW - knobW); }
        
            // Remove this when done
        $('#x').val(posX);   
        $('#c').val(pixStep); 
        $('#v').val(s);  
        
}); // End Function mousemove
}); // End Function mousedown 

// When...