JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider-container">
    <div id="slider-result">50</div> 
    <div class="slider"></div>
    <div class="clear"></div>
</div>
<input type="hidden" id="hidden"/>

CSS

/*the slider background*/
.slider {
width:230px;
height:11px;
background:url(http://thindery.com/jsfiddle/slider-bg.png);
position:relative;
margin-top: 7px;
padding:0 10px;
float: left;
}

/*Style for the slider button*/
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
background:url(http://thindery.com/jsfiddle/slider-button.png);
}

/*Result div where the slider value is displayed*/
#slider-result {
font-size:20px;
height:25px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
width:25px;
text-align:center;
text-shadow:0 1px 1px #000;
font-weight:700;
background-color:#999;
float: left;
position: relative;
}

#slider-container {
background-color: #6F9;
border: solid blue 1px;
}

/*This is the fill bar colour*/
.ui-widget-header {
background:url(http://thindery.com/jsfiddle/fill.png) no-repeat left;
height:8px;
left:1px;
top:1px;
position:absolute;
}

a {
outline:none;
-moz-outline-style:none;
}
.clear {
    clear: both;
}

JavaScript

$(".slider").slider({
    animate: true,
    range: "min",
    value: 16,
    min: 10,
    max: 50,
    step: 1,

    //this gets a live reading of the value and prints it on the page
    slide: function(event, ui) {
        $("#slider-result").html(ui.value);
    },

    //this updates the hidden form field so we can submit the data using a form
    change: function(event, ui) {
        $('#hidden').attr('value', ui.value);
    }

});