Lead: Liav Nadler
| Status | ||||
|---|---|---|---|---|
|
...
In most cases, values will be numbers with a fixed increment between them (e.g. 1, 2, 3… or 5, 10, 15, 20…)
Alternatively, values can be textual (e.g. Poor, Fair, Average, Good, Excellent) or icon-based (e.g. sentiment indicators)
States
Focus management - TBD
State | Image | Comment |
|---|---|---|
Normal |  | |
Hover |  | |
Active |  | |
Disabled |  | |
Focused |  | |
Focused Hover |  | |
Focused Active |  | |
Focused Disabled |  |
...
The slider itself has no error state
If a text field exists: typing out of range values or illegal characters will show an error message. See Field Validation
TBD
Best practices
Use a slider when:
...
If one or more of the conditions above is not met. In this case, consider using radio buttons or a dropdown menu
For selecting dates. Use a Date Picker / Range Picker instead
Range Slider
 | |
 | With input fields |
A range slider is a variation of the slider, allowing users to select a range of values within the total range
...
The slider includes two handles. The selected area will appear between the handles
The slider will not include increase and decrease buttons
The slider may include:
Two input fields - one for the minimum value and one for the maximum value
A tooltip when dragging - one tooltip showing the entire range
Dragging a handle will be limited by the other handle or by a minimum valid range
Accessibility compliance
In Focus state for a single range:
...