JSFiddle - React, Tailwind, and code Playground

by winns

HTML

<html>
<head></head>
<body>

    <span id="num">n</span>
    <div id="slider_box">
        <div id="slider"></div>
    </div> 
    
</body>
</html>

CSS

*{margin: 0; padding: 0;}

#slider_box {
    margin: 20% auto;
    width: 200px; height: 5px;
    background-color: red;
    z-index: 1; 
}

#slider {
    position: absolute;
    width: 10px; height: 20px;
    background: #333;
    opacity: 0.5;
    z-index: 2;
}

JavaScript

$(document).ready(function() {
    n_step = 10 ; n_min = 10; n_max = 2000 - n_min;
    
    m_click = false;
    
    slider_box = $('#slider_box');
    slider = $('#slider');
    data_output = $('#num');
       
    slider.mousedown(function(e){
        m_click = true;
        return false;
    });
     
    $(document).mouseup(function(e){
        m_click = false;
    });
    
    $(document).mousemove(function(event) {
        x = event.clientX;
        
        //correction
        if ( x < (slider_box.offset().left + (slider.width()/2)) ) {
            x = slider_box.offset().left + (slider.width()/2);
        }
        if ( x > (slider_box.offset().left + slider_box.width() - (slider.width()/2)) ) {
            x = slider_box.offset().left + slider_box.width() - (slider.width()/2);
        }
        
        // if mousedown
        if (m_click == true) {
            // move slider
            slider.css('left', Math.round( x - (slider.width()/2) ));
            
            slider_posx = slider.position().left;
            box_start = Math.round(slider_box.offset().left);
            box_end = Math.round(slider_box.offset().left + slider_box.width() - slider.width());
            box_width = box_end - box_start;
            
            k = slider_posx - box_start;
            
            slider_pr = Math.round((k*(n_max/n_step)) / box_width);
            n = ((slider_pr*(n_max)) / (n_max/n_step)) + n_min;

            data_output.text(n);                    
        }
    });
    
});