...
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).
...
Hovering the slider will show the current value in a tooltip above (or to the side of) the selected value.
The user can select a value using one of four these methods:
Dragging the handle to the desired position (see Drag and Drop). In this case:
If ticks exist, the movement of the handle across the axis will be discrete, along the tick marks.
If no ticks exist, the movement will be continuous.
If a text field exists, the value will be updated automatically.
a tooltip may appear, showing the value
Clicking on the axis itself. In this case the handle will move to the selected position.
Clicking the
...
increase or
...
decrease buttons. In this case:
The handle will move to the the next / previous position respectively.
If a text field exists, the value will be updated automatically.
Entering a value in the text field, if one exists. In this case, the handle will automatically move to the relevant position on the axis after moving the focus away from the text field.
Using the mouse wheel when the slider is in focus. In this case, the handle will move to the relevant position on the axis and the value will be updated automatically.
Validations and errors
The slider itself has no error state.
A warning state may be triggered when exceeding certain values (optional, see design above)
If a text field exists, typing out of range values or illegal characters will show an error message. See Field Validation. In this case, the handle will remain at its position until entering a valid value.
...
If one or more of the conditions above is not met → use Radio Buttons or a Drop-down Menu.
For selecting dates → use a Date Picker or Range Picker instead.
Range Slider
 | Basic range slider |
 | Range slider with input fields |
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
...