The jQuery UI Slider plugin converts elements into sliders. I have seen many questions from developers asking how to use the slider plugin and capture events. This post will show you how to use the jQuery UI Slider with an example
First add references to the jQuery UI CSS, jQuery library and jQuery UI library as shown below:
Note: Check my post Latest jQuery and jQuery UI Theme links on Google CDN to get more themes
Now add a Div and a Para element to the page
<div id="divOne" />
<p id="para" />
Finally, add the script to convert the div into a slider.
We are using the slide event which is triggered when the mouse is moved during slide. The ui.value is used to obtain the value of the slider. The value is then displayed in a paragraph 'para'.
The change event is triggered on slide stop and we capture the current value of the slider and alert the user.
See a Live Demo