Connecting Sliders To Number Inputs

The input element can be configured to accept numbers. When this happens, the input is just like a regular text input, expect now it's rendered with spinner buttons — used to increment or decrement values. Further constraints can be placed on number inputs, like the minimum and maximum allowed values. This let's us do interesting things, like connect the number input to a jQuery UI slider widget.

Animating jQueryUI Slider Positions

The jQuery UI slider widget has an animate option that's a little misleading. It doesn't animate the slider handle when the widget is first instantiated. There's no animation when the user physically drags the slider handle. The only difference the animation option makes, when turned on, is it animates the handle when the user clicks the slider bar.

Showing Tick Marks On Sliders

With sliders, you can specify a step. This is the value distance the slider handle will move, when moved by the mouse or keyboard. The step value defaults to 1, providing a smooth transition from one position to the next. When the step value increases, that's when you start to notice the jumps from one spot to the next, when moving the slider handle. Often, it makes sense to have these larger increments, like when precision doesn't matter. With the min, max, and step values, there are a pre-defined set of "slots" that the handle can sit in. This aren't marked, of course, but we can enhance the slider widget to allow for displaying tick marks.

Dynamic Slider Step Values

The jQuery UI slider widget defaults to a step value of 1. That means that each time the slider handle is moved, the slider value is incremented or decremented by 1. We can specify a different step value, and have these increments and decrements changed accordingly. For example, we could set the step option to 5, and have an initial value of 10. Moving the slider to the right, the next value would be 15, and so on. Not all data series work this way. Think Fibonacci. Unfortunately, a fixed step is the only thing we can supply to the slider value. However, we can map the default increments to the numbers in our series.

jQuery UI: Sliders and Tooltip Values

The slider widget let's the user control a value, between a minimum and maximum by sliding a handle back and forth. This is great for forms. The developer implementing this widget, however, needs to perform some additional work in ensuring the user has appropriate feedback when the handle changes position. How else would they know what they're selecting. Even before the user starts interacting with the slider, the current value needs to be presented. In an effort to save on both development effort and on page space, the value of the slider could be displayed as a tooltip when the user moves the pointer over the handle. Further, we could have the tooltip move along with the handle as it slides, and update the value.