JSFiddle - React, Tailwind, and code Playground

by dglazkov

HTML

<div id="media">
    <div id="slider">
        <div id="thumb"></div>
    </div>
</div>
<button>Run Simulation</div>

CSS

#slider {
    width: 600px;
    height: 10px;
    background: Fuchsia;
}

#thumb {
    width: 10px;
    height: 10px;
    background: GoldenRod;
    position: relative;
}

#media.playing #thumb {
    -webkit-transition: left 500ms ease-out;
}

JavaScript

var position = 0;
var interval;
var trackWidth = document.getElementById('slider').offsetWidth;
var maxPosition = trackWidth - document.getElementById('thumb').offsetWidth;
var delta = trackWidth / 20;
var thumb = document.getElementById('thumb');
var media = document.getElementById('media');
document.querySelector('button').addEventListener('click', run, false);

function reset()
{
    position = 0;
    clearInterval(interval);
    setPosition();
    media.classList.remove('playing');
    thumb.offsetLeft; // Necessary to force style recalc. This might be a bug in WebKit.
}

function onprogress()
{
    position += delta;
    if (position > maxPosition) {
        position = maxPosition;
    } else if (position == maxPosition) {
        reset();
        return;
    }
    setPosition();
}

function setPosition()
{
    thumb.style.left = position + 'px';
}

function run()
{
    reset();
    media.classList.add('playing');
    interval = setInterval(onprogress, 250);
}