1. Slider Control Default Setting
The default slider control value is set to zero.
2. On Hover
Hovering over the slider control handle highlights it and changes the color to #DAECCF.
Tooltip appears above the control when the user hovers over the slider control handle.
4. Drag and Move
The user can drag and move the slider control handle to see the value change.
5. Locked to Group Slider Controls
Two-sliders control can be locked and paired when the user drags and moves one slider control at a time.
6. Second Slider Control
The second slider control value changes when the user moves the first slider control.
Each slider control displays a value.
8. Total Value
The user can combine the slider control values to see the total value.
9. Moving Slider Control
When the user drags and moves a single slider control, they can see the new value on tooltip and in the text field.
The user can click on the Reset link to reset the slider control value back to zero.
11-13. Reset Result
The same default value is applied to the slider controls, as well as in the text fields and the total value.
Why Use This Pattern?
A slider allows the user to choose a value within a limited range. The user drags a handle along one dimension to set a value.
- Sliders can allow for continuous adjustment, or of values. Sliders can also be used to choose
What's the Solution?
Present the range as a slider with a drag handle. The user drags the handle to set the value within the range.
When the user drags a handle to choose a value, they can easily make a selection within a range and avoid selecting an invalid value.
Sliders allow the user to easily see the entire range of valid values and the currently selected value.
Sliders help the user manipulate a value within a range. By comparison, drop down lists do not show all valid values at once, and radio buttons only provide a small click target.
Sliders allow the user to select fractional values within the allowable range.
When to Use This Pattern?
The user needs to specify a value within a range.
DO NOT Use This Pattern When...
- Each value contains a large amount of text. Use a drop down list or radio buttons instead.
- The chosen value cannot be constrained to a specific range.