JQuery Range Slider

by Sparrow Squire

HTML

<div id="container">
    <p>Price range:
        <input type="text" id="amount" />per person</p>
    <div id="budget-range"></div>
</div>

CSS

#container {
    margin:10px;
}
input#amount {
    color:#0956B0;
    border:0px;
    font-weight:bold;
    background: transparent;
    border: none;
    width: 93px
}
#budget-range {
    margin: 0 auto;
    margin-bottom: 10px;
    width:95%;
    border:1px inset #efedee;
    border-radius:3px;
    background:transparent;
}
#budget-range .ui-slider-handle {
    height:20px;
    border-radius:3px;
    background: #0d519d;
    background: -moz-linear-gradient(top, #0d519d 0%, #0b69d3 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0d519d), color-stop(100%, #0b69d3));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #0d519d 0%, #0b69d3 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #0d519d 0%, #0b69d3 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #0d519d 0%, #0b69d3 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #0d519d 0%, #0b69d3 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d519d', endColorstr='#0b69d3', GradientType=0);
    /* IE6-8 */
}
#budget-range .ui-slider-range {
    background:#E1E1E1;
    background: -moz-linear-gradient(top, #E1E1E1 0%, #fff 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #E1E1E1), color-stop(100%, #fff));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #E1E1E1 0%, #fff 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #E1E1E1 0%, #fff 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #E1E1E1 0%, #fff 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #E1E1E1 0%, #fff 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E1E1E1', endColorstr='#fff', GradientType=0);
    /* IE6-8 */
}

JavaScript

$(document).ready(function () {
    $("#budget-range").slider({
        range: true,
        animate: true,
        min: 40,
        max: 1980,
        values: [40, 1980],

        slide: function (event, ui) {
            $("#amount").val("£" + ui.values[0] + " - £" + ui.values[1]);
        }

    });
    $("#amount").val("£" + $("#budget-range").slider("values", 0) + " - £" + $("#budget-range").slider("values", 1));

});