Selecting a Range of Values - J Query

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—are n’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 necessary:

For that to work, jQuery, jQuery UI core, and the slider .jsfiles must be included, in addition to a UI theme:

While this adds a nice-looking slider to the page, it does n’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:

Based on that markup, we can create a range slider:

Setting the range option to true instructs the plugin to create two handles instead of just one. The min and max options specify the total range available; the values option the starting positions.
The slide callback is triggered when a handle is moved. Here it updates the amount input to display the selected price range.


Binding a slider to a text input is one option; binding it to a select, and using the options of the select as values, is another.
Let’s take the example of a room reservation form where the user enters the minimum number of beds. The maximum number of beds is six; therefore, a slider is n’t a bad choice to start with. Using progressive enhancement, we can enhance the select with a slider and feed changes to the slider back to the <select>element:

Instead of using existing markup, which does n’t have any semantic meaning, we generate the <div>on the fly and insert it into the DOM, right after the <select>.
We have a single value, so we use the value option instead of the values option. We initialize it with the selected Index of the select, using the DOM property directly. The property starts at zero, so we add one.
When the slider is updated, on key presses or while dragging the handle with the mouse,the select is updated by setting its selected Index to the value read from the ui object passed to every ui event. The offset of one, which we added during initialization, is now subtracted.
We also set the range option, even though we have only one handle. It accepts a string parameter in addition to the Boolean: setting it to min displays the range from the start of the slider to the handle; setting it to max displays it from the end of the slider to the handle. This helps to visualize the minimum number of beds the hotel room should have.
Finally, we bind a click event to the select to update the slider when the select itself is changed directly by the user. We could also hide the select but would then need to add another form of label to display the selected numerical value.
The plugin also supports two more options, which were n’t covered in the example:

  • Setting animate: true animates the handle to move to the destination when clicking somewhere on the slider.

  • Setting orientation: vertical displays a vertical slider, instead of the horizontal default.

There are also more events with more fine-grained control:

  • start is called whenever sliding begins.

  • stop is called when sliding stops.

  • change is called when sliding stops and the slider value changes; this is especially useful when a change to the slider triggers an expensive operation, such as sending a request to the server, or updating a graph. Of course, it makes the slider behavior less obvious, because there isn’t instant feedback while sliding.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

J Query Topics