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


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.

Related to

  • 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