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

Marking step increments

The slider widget can be passed a step value, which determines the increments by which the user can slide the handle. If unspecified, the step option is 1, and the handle slides smoothly back and forth. On the other hand, if the step value were more pronounced, let's say 10, we would notice the handle snapping into position as we move it. Let's take a look at how we might extend the slider widget to give the user a better feel for where these increments lie. We'll mark the increments visually using ticks.

How to do it...

We'll jump right into the custom CSS used for this widget enhancement. The underlying div element used for the slider element can be as simple as <div></div>.

.ui-slider-tick { position: absolute; width: 2px; ...

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