Search within TutorialsPark

jQuery UI : Slider Events


Learn how to use jQuery UI Slider Events


jQuery UI : Slider Events

The jQuery UI slider supports various events in addition to regular events.

These events support both change and stop, thus enabling the user to differentiate between values created by the user and the values set using a program.

Table : jQuery UI Slider Events

Events Description
create The event is trigggered when the slider is created.
start The event is triggered when the user begins to start sliding the mouse.
slide The event is triggered when handle is slided using a mouse.
change The event is triggered when the user stop sliding the slider handle, or a value is changed using a program.
stop The event is triggered when the user stops sliding the scroll handle.


jQuery UI : Sliders with Bidirectional Relationship with Inputs

In the previous demos, we saw that sliders had just one directional relation with the input elements, i.e changes in input elements reflects on the slider but changes to slider does not reflect within input elements.

In the below demo, the event of create , slide and stop use a function to set input values from the slider.

Another function is used to update the values in the slider to input elements.

Example: jQuery UI - Sliders with Bidirectional relationship with Inputs

Give it a TRY! » Note:Changes if any are reflected on both slider and input field


jQuery UI : Range Sliders to Select Price Range.

In the demo below, we use a the range slider to set the price range.The event slide uses a function to set the two scroller handler.

The values of the slider is reflected within the input element using a function

Example: jQuery UI - Range Sliders to Select Price Range

Give it a TRY! » Note: The Range of sliders is between $10 to $999 .


jQuery UI: Range with Fixed Maximum Value

The jQuery UI allows you create a range slider with a fixed maximum range, allowing the user to select only the minimum limit

In the demo below, a fixed maximum is set by setting the range option to max.

Example: jQuery UI - Animating the Slider

Give it a TRY! » Note: The maximum range of sliders is 8 , and it cannot be set by the user .


jQuery UI : Range Selector with Fixed Minimum

jQuery UI also allows you to create a range selector with a fixed minimum range, thus giving the user an option to select to only the maximum.

In the demo below, we have set the range option to min.

Example: jQuery UI Range Selector with Fixed Minimum

Give it a TRY! » Note: The minimum range of the slider is $30 , user cannot change the minimum value


jQuery UI : Bound to Select Slider

jQuery UI also allows you to create a Bound to Select Slider which set the value of the slider based on the limited inputs available.

In the demo below, we use bind a slider to a select element within the HTML document, when the select is changed, it is reflected within the slider as well.

Example: jQuery UI Range Selector with Fixed Minimum

Give it a TRY! » Note: The slider selects no value other than those specfied by select elements.


jQuery UI : Snap to Increment Slider

jQuery UI also allows you to create a snap to increment Slider which has a set step size or interval to increment or decrement by.

In the demo below, a snap increment slider is created by setting the value of step option to an integer which is ideally a dividend of maximum value.

Example: jQuery UI Range Selector with Fixed Minimum

Give it a TRY! » Note: The increment step size is 40 units.


jQuery UI : Vertical Range Slider

jQuery UI also allows you to create a Vertical range selector to set and display the Range of Values

In the demo below, we have set the orientation of the slider to vertical and slide event uses a function to display the value selected.

Example: jQuery UI Range Selector with Fixed Minimum

Give it a TRY! » Note: The maximum value of the range slider is 100 units, since nothing is specified.