jQuery UI Slider Events Example

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:

jquery references

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.

jquery 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.

jquery slider demo

See a Live Demo

About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.


sepatu murah said...

Thanks for your tutor. But the message pop up is anoying. Can I make the live value beside the slider?

Unknown said...

Thank you very much!