JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/utils/Draggable.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/plugins/CSSPlugin.min.js"></script>

<div id="slider-bar">
    <div id="slider-button"></div>
</div>

CSS

#slider-bar {
    margin: 20px;
    width: 300px;
    height: 6px;
    background: #ccc;
    position: relative;
}

#slider-button {
    position: absolute; top: -7px;
    height: 20px; width: 20px; border-radius: 50%;
    background: #444;
}

JavaScript

var draggable = Draggable.create('#slider-button', {
    type: 'x',
    bounds: { left: 0, width: 300, top: 0, height: 0 },
});

$('#slider-bar').click(function(e){
    var x = e.pageX - $(this).offset().left;
    
    $('#slider-button').css({
        transform: 'translate3d(' + x + 'px, 0, 0)'
    })
    
    draggable[0].update();
})