Lead: Liav Nadler
| Status | ||||
|---|---|---|---|---|
|
...
A slider is an input component, allowing users to select a value from a predefined range
...
 |
Usage & Behavior
General guidelines
...
A slider contains:
An axis, representing the range of values
In most cases the axis will be horizontal, but it can also be vertical
The left (or bottom) area of the axis will be colored, to indicate the selected value
A handle, which a user can drag in order to select a value
An Increase button at the right (or top) end of the slider. If the handle is already at the right (or top) end of the slider the increase button will be disabled
A Decrease button at the left (or bottom) end of the slider. If the handle is already at the left (or bottom) end of the slider the decrease button will be disabled
In case of a discrete set of values: a set of tick marks, with a fixed distance between them, indicating the possible values
The slider may also include:
A set of values, ordered from minimum to maximum, for all or some of the rangevalues
For a numeric valuevalues: a supplemental text field, allowing the user to view the selected value and to change it manually
When dragging: a tooltip on top (or to the side) of the handle, showing the relevant value:
...
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 on icons (for example, (e.g. sentiment indicators)
States
Focus management - TBD
State | Image | Comment |
|---|---|---|
Normal |  | |
Hover |   | |
Active |   | |
Disabled |   | |
Focused |   | |
Focused Hover |   | |
Focused Active |   | |
Focused Disabled |   |
Interaction
The user can select a value using one of three methods:
Dragging the handle to the desired position (see Drag and Drop). In this case:
If ticks exists, 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
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 to the text field, if exists. In this case, the handle will move to the relevant position on the axis after moving the focus
Mouseover Hovering the slider will show the current value in a tooltip on above (or to the side of) the selected value
Validations and errors
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
To select For selecting dates. Use a Date Picker / Range Picker instead
Range Slider
...
 |
A range slider is a variation of the slider, allowing users to select a range of values within the total range. In this case:
Usage & Behavior
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 range
Dragging a handle will be limited by the other handle
...