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;
    height: 15px;
    z-index: -1;
}

And here is our JavaScript code that extends the slider and creates an instance of the widget using the new ticks option:

(function( $, undefined ) {

$.widget( "ab.slider", $.ui.slider, {
...