JQuery UI Slider

Sample code for a JQuery UI slider

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<h1>HTML Slider Test</h1>

<div id="slider"></div>

<div class="control-box" id="control-box-direct">
                            <input id="control-direct" type="text" value="35%" class="allocation-control" />
                            <div class='allocation-control-wrapper'>
                                <h4 class="variantLabel mycontrol-label" id="mycontrol-label-direct">Control:</h4>
                            </div>
                        </div>

CSS

h1 {
    font-family: Helvetica, Arial;   
    font-weight: bold;
    font-size: 18px;
}

body, p{
    font-family: Helvetica, Arial;
}
.ui-slider-horizontal{
    background: #0e76bc; /* Old browsers */
    background: -moz-linear-gradient(left,  #0e76bc 50%, #e78f08 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(50%,#0e76bc), color-stop(50%,#e78f08)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #0e76bc 50%,#e78f08 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #0e76bc 50%,#e78f08 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #0e76bc 50%,#e78f08 50%); /* IE10+ */
    background: linear-gradient(to right,  #0e76bc 50%,#e78f08 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e76bc', endColorstr='#e78f08',GradientType=1 ); /* IE6-9 */


}

JavaScript

$("#slider").slider(
{
    range: true,
        values: [35, 70],
        min: 0,
        max: 100,
        step: 5,
        slide: function( e, ui ) {

            $( '#control-direct' ).val( ui.values[ 0 ] + '%' );


            var slidercolor = $('#control-direct').val();

$('.ui-slider-horizontal')
           .css({background: '#0e76bc'})
           .css({background: 'linear-gradient(to right,  #0e76bc '+slidercolor+',#e78f08 '+slidercolor+')'})
           .css({background: '-moz-linear-gradient(left,  #0e76bc '+slidercolor+', #e78f08 '+slidercolor+')'})
           .css({background: '-webkit-linear-gradient(left,  #0e76bc '+slidercolor+',#e78f08 '+slidercolor+')'});
            
        }
});

$( "#slider-value" ).html(  $('#slider').slider('value') );