The slider () Method

The slider () method can be used in two forms:

  • $(selector, context).slider (options)

  • $(selector, context).slider ("action", params)

The slider (options) Method

The slider (options) method declares that an HTML element should be managed as a slider. The options parameter is an object that specifies the appearance and behavior of the slider.

Some options allow you to position multiple cursors on the axis and specify whether the cursors can pass each other on the axis.

Managing the appearance and behavior of sliders

Table 7-1 describes the options for managing the appearance and behavior of sliders.

Table 7-1. Options for managing slider appearance and behavior




If true, disables the slider. No cursor movement or click on the axis will be considered until the slider is returned to the enabled state (by slider ("enable")).


If true, creates an animated effect when users click directly on the axis. By default, it is set to false, in which case clicking on the axis places the cursor directly where the user clicked, with no animated effect.


Indicates the horizontal or vertical orientation of the slider. The default value is "horizontal". To position the slider vertically, use "vertical".

Managing the values of cursors

Table 7-2 describes the options available for managing the values that appear on the slider.

Table 7-2. Options for managing slider values




Indicates the value of the cursor when positioned ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.