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.

Example

With min and max values

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.

-

-

• 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