Lead: Liav Nadler
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
A slider is a form an input component, allowing users to select a value from a predefined range by dragging a handle across a horizontal axis
Types
...
...
Usage & Behavior
General guidelines
...
A slider contains at least two four elements:
A horizontal axis, representing the range of values
A handle, which a user can drag in order to select a value
An Increase button at the right end of the slider
A Decrease button at the left end of the slider
The slider may also include:
A set of tick marks, with a fixed distance between them, indicating the number of possible values
A set of textual values, ordered from minimum to maximum
A tooltip on top of the handle, showing the selected value
A supplemental text field, allowing the user to enter view the selected value and to change it manually. This is especially relevant to numeric values mandatory?
Default State
A slider must have a default value, which the handle is set to
Content
TypicallyIn most cases, values are numeric numbers with a fixed increment between them (e.g. 5, 10, 15, 20)
Alternatively, but they values can also be textual (e.g. Poor, Fair, Average, Good, Excellent) or based on icons (e.g. for sentiment)
States
...
State | Image | Comment |
|---|---|---|
Normal |  | |
Hover |  | |
Active |  | |
Disabled |  | |
Focused |  | |
Focused Hover |  | |
Focused Active |  | |
Focused Disabled |  |
Interaction
<<for example, how to change a value – type, arrows, use slider>>
...
The user can select a value using one of three methods:
Dragging the handle to the desired location
Clicking the increase or decrease buttons
Entering a value to the text field, if available
Validations and errors
<<used for specific components e.g. slider>>
Transitions
<<Used to describe transitions or animations the occurs in any of the interaction stages>>
Best practices
<<e.g. Slider should display a label its on>>
...