Chlorophyll
Styles
Slider
A slider to adjust values and see results with.
Available in
Angular
Javascript
Component meta
Component identifier
- component-slider
Design principles
- Everyday first
Guidelines
Short description
The component enables a quick adjustment of values and provides an immediate update of the result.
When and how to use it
On pages where the user can experiment or adjust values in a scale, often used in calculators such as "How much can I borrow?".
Behaviour
A slider element slides along a horizontal bar. It is possible to enter a value into the input field or to drag the slider element to select a value. The values are predefined for each slider element. It is possible to show min/max values to make it more obvious which values are allowed.
Small mobile design
The mobile design is basically the same as the desktop design. It is important that the label fits within two rows. The recommended break point for the input field to go on its own row is for viewpoints below 350px.
Example
With min and max values
Small mobile design
Error handling
In the case the user enters an erroneous value, meaning a value that is lower or higher than the allowed values, the number in the input field jumps to the max or min allowed value and an error message appears
Slider error
Do's and don'ts
Do
- The label should be a maximum of two rows.
- Add min/max values if needed.
Don't
- Don't overuse on one page.
Writing
-
Accessibility
-
Specification
- Details: Specification in Figma
- Instruction: How to access Figma
Animation
- On hover, increase size animation 5% on thumb
- When selected, use Blue line on thumb - 3 px with 4 px border-radius