In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Range sliders

The range slider is an input that allows users to select a range of values among the lower and upper limits of a given scale.

Usage
Range Slider Component

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). 

 

Best Practices

- A label stating the nature of the selection should always precede a range slider.

- The range of the slider should clearly indicate the minimum and maximum values, as well as the intervening steps.

- The range slider is always “stepped’’ to make choosing the value easier (exhibiting a magnetic effect for each step).

- The steps in a range slider must be adapted to 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, for example).

- The values in the range slider are always organized in ascending order.

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

 

Placement 

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).

Visual
Range Slider

Appearance

The range slider is presented in the form of a track bar with a range of values. The selected part is highlighted using a color from the primary palette.

 

Behavior

The values of the steps turn into a selected state when they are defined as a minimum or maximum value of the range of values.

Back to top