jQuery UI : Slider
Learn how to use jQuery UI Slider
jQuery UI : Slider
The jQuery UI slider widget is used to create a slider out of elements within the HTML document.
Sliders are useful to select values within a given range, to create a slider you use the slider method.
The color and appearance of the slider is based on the jQuery UI themes, values can be selected by using the mouse or arrow keys to move the slider up and down the scale.
Example: jQuery UI - Creating a SliderGive it a TRY! » Note: Select values by using the mouse pointer or arrow key
Table : jQuery UI Progress Bar Settings
|animate||When set to true, slider animates when the user clicks on any point of the scope. Default is false.|
|disabled||When set to true the slider is disabled. Default value is false.|
|max||To set the maximum value of the slider. The default value is 100|
|min||To set the minimum value of the slider. The default value is 0|
|orientation||To set the orientation of the slider. i.e Horizontal or Vertical|
|range||To set the range, it creates a multihandle slider.|
|step||To set the step size or interval that the slider moves between the maximum and minimum values.|
|value||To set the value of the slider.|
|values||It is used with range setting inorder to create a multihandle slider.|
jQuery UI : Setting the Orientation of the Slider
jQuery UI sliders by default have a horizontal orientation, but you have an option to change the orientation to create vertical sliders as well.
In the demo below, you have two sliders, one has the orientation of horizontal while the other has the orientation of vertical
Example: jQuery UI - Setting the Orientation of SliderGive it a TRY! » Note: You can also use CSS styles to style he sliders.
jQuery UI: Animating the Slider
The jQuery UI setting of animate is used to enable smooth scroller movement when the user clicks the slider at the position on the seeker where they wan to move the scroller.
The default animation can be enabled by setting the value of animate to true. The Speed can be set using fast or slow.
Animation time can also be specified in terms of milliseconds.
Example: jQuery UI - Animating the SliderGive it a TRY! » Note: Had the animation not been enabled, the scroller would just span instantly to the location.
jQuery UI : Creating a Range Slider
jQuery UI can be used to create a range slider , a range slider has two scroller to set the range.
To create a range slider, set the value of setting range to true and then set the value setting to an array that has the lower and upper limit.
For the events of create and slide we use a handler function.The position of the scroller is set using the value method and index of the slider concerned.