Search within TutorialsPark

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 Slider

Give it a TRY! » Note: Select values by using the mouse pointer or arrow key


Table : jQuery UI Progress Bar Settings

Settings Description
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 Slider

Give 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 Slider

Give 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.

Example: jQuery UI Creating a Range Slider

Give it a TRY! » Note: The lowerlimit is 25 while the upperlimit is 75