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
|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 InputsGive 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 RangeGive 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 SliderGive 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 MinimumGive 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 MinimumGive 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 MinimumGive 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.