JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div id="slider"></div>

CSS

#slider { width: 90%; margin: 50px auto; }

JavaScript

$(function(){

    // ytplayer.getDuration(); // # seconds from YouTube API
    var duration = 200,
        // ytplayer.getVideoBytesTotal();
        totalBytes = 100000000,
        // ytplayer.getVideoStartBytes();
        startBytes = 0; 

    $("#slider").slider({
        range: "max",
        min: startBytes,
        max: duration,
        value: 1
    })
    .css('background-image', 'url(http://i56.tinypic.com/fbjad2.png)');

    // Loop to update slider
    function loop() {

        // demo function - use ytplayer.getCurrentTime();
        var time = getCurrentTime(),
            // demo function - use ytplayer.getVideoBytesLoaded();
            // make loaded a percentage
            loaded = 100 - (getVideoBytesLoaded() / totalBytes) * 100; 

        // set limit
        if (loaded < 0) { loaded = 0; }

        // update time on slider
        $('#slider')
            .slider('option', 'value', time)
            .find('.ui-widget-header').css('width', loaded + '%');

        // repeat loop as needed
        if (loaded < 0 || time < duration) {
            setTimeout(loop, 500);
        }
    }
    loop();
});

// Nothing to see here... move along... ok, Thar be dragons!
// Demo functions only
var time = 0,
    bytes = 0;
getCurrentTime = function() { return time++; };
getVideoBytesLoaded = function() {
    return (bytes += Math.floor(Math.random()*500000) + 1000000);
};