Cover by Cody Lindley

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

11.4. Selecting a Range of Values

Problem

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.

Solution

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 necessary:

<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:

<link rel="stylesheet" href="ui.core.css" />
<link rel="stylesheet" href="ui.slider.css" />
<link rel="stylesheet" href="ui.theme.css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.slider.js"></script>

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 ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required