Sliders are an input that allows users to make an imprecise selection from a range of values.
- 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
- 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.
The structure of the slider is horizontal and has a single handle that can be moved along a track with the mouse or by using the arrow keys. The position of the handle denotes the selected value.
Steps are selectable values along a slider range and can be visually indicated by vertical tick marks.
- For a fine-grained range, hide tick marks to minimize visual clutter. For example, a range of 0%–100% with 1% steps.
- For a coarse-grained range, where the slider may snap to widely spaced intervals, show a tick mark for every step so it is clear where the slider will snap to.
Where the range of values is not obvious, sliders should be labeled with minimum and maximum values. An optional center label can also be used to denote a middle value or as a description.
- 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
Keep descriptive labels short (1-2 words max)
- 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.