JSFiddle - React, Tailwind, and code Playground

by MattiasBuelens

HTML

<div id="play">Play</div>
<div id="bar">
    <div id="indicator"></div>
</div>

CSS

#play {
	position:absolute;
	left:45px; top:20px;
	cursor: pointer;
}

#bar{
	position:absolute;
	width:150px; height:4px;
	background-color:#999;
}

#indicator{
	position:absolute;
	width:0px; height:4px;
	background-color:#333;
}

JavaScript

$(function(){

    $("#play").click(function() {
        $("#indicator").animate({"width": "150px"}, 8400);
    });

    $("#bar").click(function(e) {
        var x = e.pageX - $(this).offset().left;
        $("#indicator").stop().width(x);
    });

});