Imagine a car search interface: the user inputs the price range that’s acceptable for him, and while changing the value, the list of available cars in that range is updated. The HTML form elements for that type of input—plain text input, radio buttons, selects—aren’t good enough. On the one hand, each requires an exact value. On the other, they fail to visualize the price range. It’s also not possible to move the entire range; instead, the user has to update both the start and end values, one by one.
The jQuery UI slider widget can transform two text inputs into a range slider. The start and end values of the range can be dragged using the mouse or using the cursor keys.
The default slider is applied to a simple
<div>, with no options
<div id="slider"></div> $("#slider").slider();
For that to work, jQuery, jQuery UI core, and the slider
.js files must be included, in
addition to a UI theme:
While this adds a nice-looking slider to the page, it doesn’t yet really do anything useful.
In the case of the car search, we want to put the selected values into an input field and display them to the user:
<p> <label for="amount">Price ...