Lead: Liav Nadler ONGOING
Description
A slider is an input component, allowing users to select a value from a predefined range
Usage & Behavior
General guidelines
A slider may appear in a form, a dialog, a filter panel or a widget
The set of values can be either discrete or continuous, depending on the number of values (see below)
Structure
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 end of the slider. If the handle is at the right end of the slider the increase button will be disabled
A Decrease button at the left end of the slider. If the handle is at the left end of the slider the decrease button will be disabled
In case of discrete 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 range
A supplemental text field, allowing the user to view the selected value and to change it manually. This is especially relevant to numeric values
When dragging: a tooltip on top (or to the side) of the handle, showing the relevant value:
Default State
A slider must have a default value
Content
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 based on icons (for example, sentiment indicators)
States
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
Validations and errors
The slider itself has no error state
If a text field exists
Best practices
Use a slider when:
Values have a distinct order
There is a default value
There are at least three possible values
Don’t use
If one or more of the conditions above is not met. In this case, consider using radio buttons or a dropdown menu
Variation - Range Slider
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
Focus management
<<How will the component work with keyboard only - without a mouse. Can be reference if written above
We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>
Contrast & size compliance
<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>
Design
Zeplin link | Screen thumbnail |
---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
Code
<<a box containing the code - discuss with Femi>>