Sliders & Ranges
A slider allows the user to specify a range between a minimum and maximum value.
The slider has a single handle that is horizontally guided along a track with a mouse or the arrow keys. The handle's position indicates the chosen value.
Types
Guidelines
Anatomy
- Min value: The minimum value can be set by sliding the slider to the left. By moving left on the slider, the values become smaller.
- Fill: Comes from the left side of the track by default
- Value: Is optional, shows the numeric value that corresponds with the thumb’s placement.
- Thumb: A position indicator that can be moved along the track, displaying the selected value of its position.
- Track: Shows that the range that is available for a user to select from.
- Max value: By dragging the slider to the right, a user can specify the maximum value. The slider's values get larger as it moves right.
Interaction
Specifications
Designers and developers should follow these specifications in order to create better and more pixel-perfect sliders and ranges.
Best Practices
Use a slider when:
- It is more important to have range than precision
- It is more important to consider a relative value than an exact value.
Do
- Allow users to enter a numeric value that is neither less than one nor higher than another using a slider.
- Numerical value entry accuracy is not important.
Don't
- When accuracy of a numeric value is critical.
- For entering arbitrary numeric values.