Home » jQuery UI Slider

jQuery UI Slider

jQuery UI slider is used to obtain a numeric value within a certain range. The main advantage of slider over text input is that it becomes impossible for the users to enter an invalid value. Every value they can pick with the slider is valid.

Syntax:

You can use the slider () method in two forms:

First Method

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

You can use one or more options at a time using JavaScript object. In the case of more than one options you have to separate them using a comma as follows:

Following is a list of different options that can be used with this method.

Option Description
animate If you set this option as true, it creates an animated effect when users click directly on the axis. By default its value is false.
disabled If you set this option as true, it disables the slider. By default its value is false.
max This option is used to specify the upper value of the range that the slider can attain?the value represented when the handle is moved to the far right (for horizontal sliders) or top (for vertical sliders). By default its value is 100.
min This option is used to specify the lower value of the range that the slider can attain?the value represented when the handle is moved to the far left (for horizontal sliders) or bottom (for vertical sliders). By default its value is 0.
orientation This option specifies the horizontal or vertical orientation of the slider. By default its value is horizontal.
range This option indicates whether the slider represents a range. By default its value is false.
step This option is used to specify discrete intervals between the minimum and maximum values that the slider is allowed to represent. By default its value is 1.
value This option is used to specify the initial value of a single-handle slider. In the case of multiple handles (see the values options), it specifies the value for the first handle. By default its value is 1.
values This option is of type array and causes multiple handles to be created and specifies the initial values for those handles. This option should be an array of possible values, one for each handle. By default its value is null.

jQueryUI slider() example 1

Let’s take a simple example to demonstrate the slider functionality, passing no parameters to the slider() method.

Test it Now

jQueryUI slider() example 2

Use of value, animate and orientation:

Let's take an example to demonstrate the usage of options value, animate and orientation in the slider function of jQueryUI.

Test it Now

jQueryUI slider() example 3

Use of range, min, max and values:

The following example shows the usage of options range, min, max, and values in the slider function of jQueryUI.

Test it Now

Second Method

The slider ("action", params) method specifies an action on the slider, such as moving the cursor to a new location. This action is specified as a string in the first argument (e.g., "value" to indicate a new value of the cursor). Check out the actions that can be passed, in the following table.

Following is a list of different actions that can be used with this method:

Action Description
destroy This action is used to destroy the slider functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.
disable This action is used to disable the slider functionality. This method does not accept any arguments.
enable This action is used to enable the slider functionality. This method does not accept any arguments.
option( optionName ) This action is used to retrieve the value of the specified param option. This option corresponds to one of those used with slider (options). Here optionName is the name of the option to get.
option This action gets an object containing key/value pairs representing the current slider options hash.
option( optionName, value ) This action sets the value of the slider option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option.
option(options) This action sets one or more options for the slider. The argument options is a map of option-value pairs to be set.
value This action is used to retrieve the current value of options.value (the slider). It is used only if the slider is unique (if not, use slider ("values")). This signature does not accept any arguments.
value(value) This action is used to set the value of the slider.
values This action retrieves the current value of options.values (the value of the sliders in an array). This signature does not accept any arguments.
values(index) This action gets the value for the specified handle. Here index is of type integer and is a zero-based index of the handle.
values( index, value ) This action sets the value for the specified handle. Here index is the zero-based index of the handle and value is the value to set.
values(values) This action sets the value for all the handles.
widget This action returns a jQuery object containing the slider. This method does not accept any arguments.

jQueryUI slider() example 4

Let's take an example to demonstrate the actions from the above table. In this example, we are using disable () and value () method.

Test it Now

Next TopicjQuery UI Spinner

You may also like