JQuery UI Slider example

Sample code for a JQuery UI slider

by CarambaMoreno

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>
<p>Your slider has a value of
    <input id="slider-value" value=""></input>
</p>

JavaScript

$("#slider").slider({
    value: 100,
    min: 0,
    max: 500,
    step: 50,
    slide: function (event, ui) {
        $('#slider-value').val(ui.value);
    }
});

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