JSFiddle - React, Tailwind, and code Playground

by Daniel Pegues

HTML

<div class="slide-control-group">
    <input type="number" min="1" max="20" value="10" class="slider" data-control-group="homepage">
</div>

CSS

.slide-control-group {
    margin: 20px 0;
}
.slide-control {
    width: 315px;
    height:15px;
    position:relative;
    border:1px solid #d6d6d6;
    background:#ffffff;
    margin-left: 90px;
    display:block;
    overflow: visible;
}
.slide-control-button {
    position:absolute;
    z-index:2;
    width:28px;
    height:29px;
    left:0;
    margin-left: -14px;
    top: -7px;
    bottom:-34px;
    background: #eee;
}

JavaScript

$(function(){
    
    $('.slider').each(function() {
    controlGroup = $(this).attr('data-control-group')
    percentage = ( parseInt($(this).val()) / 20 );

    htm = '<div class="slide-control">'+
        '<div class="slide-control-button" data-control-group="'+controlGroup+'"></div>'+
        '</div>';
    $(this).after(htm).attr('readonly', true).css('display', "none");
    $('.slide-control-button[data-control-group='+controlGroup+']').css({left: 315*percentage});
        
        
    // dragging example
    var slider  = $(this).next();
    var btn = slider.find('.slide-control-button');
    var startOffset, holderOffset, sliderWidth, handleWidth;
        
    btn.on('mousedown', function(e) {
       e.preventDefault(); 
        holderOffset = slider.offset().left;
        startOffset = btn.offset().left - holderOffset;
        sliderWidth = slider.width();
        
        $(document).on('mousemove', moveHandler);
        $(document).on('mouseup', stopHandler);                
    });
    function moveHandler(e) {
        var posX = e.pageX - holderOffset;
        posX = Math.min(Math.max(0, posX), sliderWidth);
        btn.css({
            left: posX
        });
    }
    function stopHandler() {
        $(document).off('mousemove', moveHandler);
        $(document).off('mouseup', stopHandler);
    }
           
        
});

});