<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script> <script type="text/javascript"src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/utils/Draggable.min.js"></script> <div class="center"> <input id="xpos" class="output" type="text" value="0"> <input id="percentage" class="output" type="text" value="0"> <div class="slider"> <div class="scrub">•</div> </div> </div>

body { background-color:#333; } .slider { height:15px; width:300px; background-color:#555; border-radius: 30px; margin-bottom:30px; } .scrub { position:absolute; font-size:100px; margin-top:-50px; color:green; padding-left:5px; padding-right:5px; } .center { position: relative; height:5px; width:300px; left:50%; margin-left:-150px; margin-top:75px; } .output { color:#fff; background-color:#1f1f1f; border:0; text-align:center; font-size:30px; width:300px; margin-bottom:10px; border-radius: 30px; }

Draggable.create(".scrub", {type:"x", edgeResistance:1, bounds:".slider"}); // we are done at this point // output the value TweenMax.to(this, 10000, {alpha:10, onUpdate:update, repeat:-1}); function update() { $ (+ 'px') $('#xpos').val( $('.scrub').position().left ); $('#percentage').val( Math.round( $('.scrub').position().left*1000 / 2720 ) + '%' ); }