O'Reilly logo

jQuery UI Cookbook by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Getting range values

The slider widget can be used to control a range value. So instead of moving a fixed point, that is the handle, back and forth over the slider axis, the user will move two handles back and forth. The space in between these two points represents the range value. But how do we go about computing that number? The slider widget gives us the raw data, the upper and lower bounds on the user selection. We can use these values inside our event handlers to compute the range value.

Getting ready...

We'll use just a basic slider for this demonstration, but we'll need some supporting CSS and HTML surrounding the slider so that we can display the range values as they're changed. Here is the CSS:

.slider-container { width: 180px; margin: 20px; ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required