A slider control uses draggable handles to select numeric values. Below is an example of a basic slider initialization:
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
<div id="slider"></div>
Range sliders provide 2 draggable handles to select numeric values. The slider's initialization must provide a range option set to true to create a range slider:
<script>
$(function() {
$( "#range-slider" ).slider({
range: true
});
});
</script>
<...
A slider element can have its value set on initialization by providing a value option. This option is a number:
$( "#slider" ).slider({
value: 5
});
A range slider can also have its values set in this way by providing a values option. This option is an array of numbers:
$( &qu...
The slider provides an event called slide that will trigger whenever the mouse moves during a slider handle drag. This function holds a reference to the slide event and a reference to the slider ui object. The ui object holds a jQuery object for the handle being moved and the value(s) of the slide...
The slider provides an event called change that will trigger after the mouse completes a slider handle drag or if the value(s) have been changed programmatically. This function holds a reference to the slide event and a reference to the slider ui object. The ui object holds a jQuery object for the ...