Slider
Control that allows users to make a selection along a range.
Sliders are interactive controls enabling users to set or select a value along a range. They’re typically used in settings or configurations.
Also known as: Range selector, range slider, trackbar, scale, control slider, value selector, UISlider (iOS), SeekBar (Android).
Anatomy
A. Label (required): Text indicating the purpose of the slider.
B. Tooltip (optional): Tooltip component used to indicate the currently selected value.
C. Rail (required): Background element representing the available range for the slider.
D. Min/max value (optional): Text or icon indicating the range of available values.
E. Switch circle (required): Interactive element used to set the value along the rail.
Usage
| When to use | When not to use |
|---|---|
| To enable users to make a selection along a range of values. | To switch between content views. Use a toggle button instead. In place of a checkbox or radio button. |
Best practices
- Position the lower value on the left and the higher on the right for left-to-right languages.
- Consider using a checkbox group or radio if there are only a handful of options, as they can be easier to interact with.
Do Always identify what the slider is used for. Keep the labels short and straightforward.
Don't Use or modify sliders for binary options. Use a toggle button instead.
Do Include the units whenever you can in the focus tooltip or as part of the control label.
Don't Use sliders if other form controls convey the information better for the user.
Discrete vs. continuous sliders
Sliders can be discrete or continuous, which refers to how the values behave when the slider is adjusted. Learn about each option below.
Discrete
Discrete sliders snap to specific values along the rail. They often have defined gaps in the values, like sets of five.
- Use discrete sliders when users need to select a distinct number from a range of predefined choices or steps.
Continuous
Continuous sliders don’t snap to specific values and can be set anywhere along the range.
- Use continuous sliders when users can select any value from a range, or the specific value is vague or not critical.
Min-max range
Minimum and maximum values can be added to clarify the slider’s range. Min-max values can be implemented with text or icons.
Min-max values in text
Textual values give exact numbers representing the minimum and maximum. This is helpful when the values are known and relevant to the user.
Min-max values using icons
Icon min-max values visualize the range of values without specifying exact numbers. This is helpful when the values are unknown or not relevant to the user.
Behaviors
Dual-point sliders
A dual-point or double slider indicates an upper and lower boundary. Values can be adjusted from both ends, indicating a starting and ending value. This type of slider can be used instead two sliders and is common for filtering search results.
Content
- Use sentence case without punctuation for all labels.
- Keep labels short to avoid unnecessary truncation.
- Avoid acronyms or jargon.
