jQuery UI - Slider

by spring1975

HTML

<label for="amount">Maximum price:</label>
<input type="text" id="amount" />
<div id="slider-range-min"></div>
<button id="resetValue">
Reset
</button>

CSS

#amount {
    border: 0;
    color: #f6931f;
    font-weight: bold;
}

JavaScript

$(function () {
    $("#slider-range-min").slider({
        range: "min",
        value: 37,
        change: function (event, ui) {
            $("#amount").val("$" + ui.value);
        },
        slide: function (event, ui) {
            $("#amount").val("$" + ui.value);
        }
    });
    $("#amount").val("$" + $("#slider-range-min").slider("value"));
    $('#resetValue').on('click', function() {
    	$("#slider-range-min").slider( "value", 40);
    });
});