Tutorial by Examples

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> &lt...
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 ...

Page 1 of 1