Slider

The slider allows the user to select values within a predefined range. It makes it easy to adjust the value, as well as lets you enter a specific value via keyboard.

Usage

The component should be used when a user need to select a value within a predefined range of values.

It gives a hint of the interval and what a typical (default) value is. It also allows to adjust it quickly to check the updated result.

Slider

Behaviour

The component includes a slider bar, label, slider control and input field. By default min.; max. and default value should be set. Also, a step value should be set which affects the interval by which a slider moves.

Do's and don'ts

Do

  • This version works best on white background.

Don't

  • Might not be the right choice when the user has to provide a precise value, which is already known in advance. (e.g. 100’234 EUR).
  • Don't place the error text under the line - it's too far from the input field which it validates.

Related to

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

Specification

 Desktop

Specification - Slider for desktop

Mobile

Specification - Slider for Mobile

States

Desktop

States - Slider for desktop

 

Mobile

States - Slider for mobile