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: typing an invalid value, including illegal characters or out of range values will show an error message. See Field Validation
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
Range Slider
A range slider is a variation of the regular slider, allowing users to select a range of values within the total range. In this case:
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
Two tooltips when dragging - one for each handle
Dragging a handle will be limited by the other handle
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>>