JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<div id='wrap'>
	<div id="square"></div>
	<input id="slider" type="range" min="0" max="100" />
</div>

CSS

#square{
	width: 100px;
	height: 100px;
	background: blue;
}

JavaScript

prev=0;
curr=0;
var square=null,slider=null;
var dur=500;
$(function(){
    square=$('#square');
    slider=$('#slider');
    curr=parseInt(slider.val(),10);
    square.animate({'margin-left':curr},{duration:dur});
    slider.on('mousedown',function(e){prev=curr;});
    slider.on('change',function(e){
        curr=parseInt(e.target.value,10);
        $(window).animate({prev:curr},{duration:dur,step:function(){slider.val(prev);}});
        square.animate({'margin-left':curr},{duration:dur});
    });
});