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