...
Sliders may appear in forms, Dialogs, Filter Panels, or Widgets.
The set of values can be either discrete or continuous, depending on the number of values (see Structure below).
...
In the Focus stated for a single-value slider:
...
Using the left and right arrows will move the handle accordingly.
...
, if a supplementary text field exists, typing will enter/update the value.
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Keyboard | Single selector | Range selector |
|---|---|---|
 |  | |
Tab | Navigates to the next component. |
|
Shift + Tab | Navigates to the previous component. |
|
Space | N/A | N/A |
Enter | N/A | N/A |
Esc | N/A | N/A |
Arrows | Up/Down or Left/Right - Increases or decreases the value accordingly. | Up/Down or Left/Right - Increases or decreases the value accordingly. |
Page Up | Increases the slider value by multiple steps, e.g. by ten steps. | Increases the slider value by multiple steps, e.g. by ten steps. |
Page Down | Decreases the slider value by multiple steps, e.g. by ten steps. | Decreases the slider value by multiple steps, e.g. by ten steps. |
Home | Sets slider to its minimum value. | Sets slider to its minimum value. |
End | Sets slider to its maximum value. | Sets slider to its maximum value. |
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
...