Range Slider

The range slider allows users to select a range of values on a defined interval.

General guidelines

The range slider allows users to select a range of numerical values visually, which may be modified by drag and drop. The range of values may be selected when using limited scales (with a minimum and a maximum).

It’s always “stepped’’ to make choosing the value easier (exhibiting a magnetic effect for each step).

Best practices

- Put the label stating the nature of the selection before.

- Indicate the minimum and maximum values whenever possible.

- Choose consistent steps with the value that the user must select (i.e. do not create 1€ steps when asking for a choice between millions of euros).

- Do not use the range slider when the scale of values is low (from 1 to 3 steps, for example) or too large (1000000 steps).

- Always organized the values in ascending order.

- Selecting a value that is not in a step is not possible.

- The slider label can indicate what value the slider is changing thanks to numeric inputs.

Single range slider

The user only selects one value in the range in the single range slider. It is often used in forms.

The labels and the numeric inputs are optional.

Dual range slider

The user only selects two values in the range in the dual version.

The range slider may be used in filter panels or in a card, when selecting a range of values is required (to define the values of a graph, for example).

On hover, a tooltip can indicate the value.

Single range slider


The range slider has only one size, but 6 different states: Default, Hover, Empty, Completed, Focus, Disable. 

The range slider is presented in the form of a track bar with a range of values.

The selected part is highlighted by the primary blue.

Range Slider04
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top