JSFiddle - React, Tailwind, and code Playground

by Lardpower

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

TweenLite.set('#slider-button',{xPercent:"-50%"});
var draggable = Draggable.create('#slider-button', {
    type: 'x',
    bounds: {minX:0,maxX:300}
});
$('#slider-bar').click(function(e){
    var x = e.pageX - $(this).offset().left;
    TweenLite.set($('#slider-button'),{x:x});
    draggable[0].update();
})