The component allows for easy adjustments of a value and check the updated result immediately.
When and how to use it
On pages where the user can experiment or adjust values in a scale, such as "How much can I borrow?".
A slider element that slides along a horizontal bar.
Do's and don'ts
- Avoid when when the user has to provide a precise value, which is already known in advance. (e.g. 100’234 EUR)
- Don't overuse on one page.
- Input fields (the input part should comply with Input fields specification)
Hover: Increase size animation 5% on thumb
Focus: Blue line on thumb - 3 px with 4 px border-radius