A slider lets people imprecisely select a value from a subjective range by moving a handle horizontally.
Also known as:
RangeRange inputRange slider
- Autocomplete (not built)
- Button Group (not built)
- Checkbox Group
- Date Picker (not built)
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon Button
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Pagination (not built)
- Progress Bar (not built)
- Progress Stepper
- Radio Group
- Rich Text Editor
- Search Field (not built)
- Slider (not built)
- Split Button
- Tile Grid
- Toast Notification
Sliders are helpful for choosing subjective values.
- Always indicate the current, selected value. Ideally with visible text associated with the handle, but at a minimum provide a text alternative for screen readers.
- Provide a visible label describing what the slider changes, such as "Brightness".
- Show the minimum value on the left and maximum value on the right, where these are reversed in Right-To-Left (RTL) languages.
- We generally use sliders with no fill. You might use a fill when it's useful to give the impression of building towards the maximum value.
- We only use horizontal sliders. We're yet to need a vertical slider.
- We only use sliders with a single handle. We're unlikely to need a slider with more than one handle.
- Tick marks:
- For a fine-grained range, you might consider hiding tick marks to minimize visual clutter. For example, a range of 0%–100% with 1% steps would have too many ticks and be incredibly crowded.
- For a coarse range, where the slider may snap to widely spaced intervals, you might show a tick mark for every step so it is clear where the slider will snap to.
- Tick labels:
- There's rarely a need to apply labels to every tick mark. Consider only showing a label for min, max, and middle ticks, such as 0%, 100%, and maybe 50%.
- Use a
stepnumber to set the granularity that the slider values snap to. A good default step is 1 to stick to whole numbers.
- Consider pairing the slider with a Text Field as an alternative input control.
For a custom slider:
- Use the
roleto show that the element displays selects a value from within a given range.
- Use the
aria-valuemaxattributes to indicate progress completion.
- Use the
aria-valuetextattribute to show a text label associated with a given value.
- Ensure a large touch target for selecting the handle.
- The slider must be keyboard focusable and operable, and RTL languages reverse the direction of arrows. Usually:
- Right and Up arrows increase the selected value
- Left and Down arrows decrease the selected value
When to use
- Use a slider when an imprecise selection makes sense. For example, you might use a slider to ask someone to rate how they're feeling or adjust settings, such as brightness or volume.
- Use a slider when changing the value has an immediate effect. If applying the setting requires pressing a confirmation button, consider using a Radio Group instead.