JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<div id="slider"></div>

CSS

#slider{
    left:50px;
    top:25px;
    width:50%;
    height:10px;
    margin:0px!important;
}
#slider .toTheLeft{
    width:100%;
    height:100%;
    background:#00ff00;
    z-index:200;
    position:relative;
}
#slider .ui-slider-handle {
    width:12px!important;
    height:12px!important;
    top:10px!important;
    margin-left:-6px!important;
    margin-right:10px!important;
    z-index:200;
    background:url("http://www.predig.com/images/PD540/arrow_small_up.gif") no-repeat!important;
    border:0!important
}

JavaScript

$(function() {
    $("#slider").append('<div class="toTheLeft"></div>').slider({
        create:function(event,ui){
            $(this).find(".toTheLeft").width($(this).find(".ui-slider-handle").css("left"));
        },
        slide:function(event,ui){
            $(this).find(".toTheLeft").width($(this).find(".ui-slider-handle").css("left"));
        },
        stop:function(event,ui){
            $(this).find(".toTheLeft").width($(this).find(".ui-slider-handle").css("left"));
        }
    });
});