jQuery UI Slider Events Example

Tweet

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

Tweet

About The Author

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.