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



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

2 comments:

sepatu murah said...

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

Miguel Ramon said...

Thank you very much!