Slider

A slider to experiment and adjust values with.

Short description

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?".

Behaviour

A slider element that slides along a horizontal bar. 

Do's and don'ts

Don't
  • 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.

Related to

  • Input fields (the input part should comply with Input fields specification)

 

Specification

States

Hover: Increase size animation 5% on thumb

Focus: Blue line on thumb - 3 px with 4 px border-radius