Navigieren auf digital.sbb.ch

Beta

Slider

1. What does the component do?

  • Allows a quick selection of a value within a range of values.

2. When should the component be used?

  • To quickly select a value within a range of values.

3. Rules

  • The textfield for displaying the currently selected value is optional.
  • The display of min and max values is optional.
  • The value can be changed using drag & drop or a click on the slider bar.

4. Variants and statuses

The component has the following statuses:

  • Default
  • Hover
  • Pressed
  • Focused
  • Disabled

4.1 Continuous

Example image of the component Slider in the variant continuous in horizontal alignment

Design specification (horizontal)

Display of the component Slider in the variant continuous in vertical alignment

Design specification (vertical)

  • Default

  • Hover

  • Pressed

  • Focused

  • Disabled

  • This variant should not be used for very large or very small value ranges, but above all for imprecise value ranges (e.g. "quiet" - "loud", "little" - "much").

4.2 Discrete

Example image of the component slider in the variant discrete in horizontal alignment

Design specification (horizontal)

Example image of the component slider in the discrete variant in vertical alignment

Design spezification (vertical)

4.3 Value range

Example image of the component slider in the variant value range

Design spezification

4.4 Single value

Example image of the component slider where a single value is set in a value range

Design spezification