Skip to main content

Sliders

Sliders allow users to make selections from a range of values.

Specifications

  • Always use with a label, even if that label is hidden.
  • When a label is visible, it should clearly communicate the purpose of the range input and its values (min, max, step, value).
  • Label sliders as optional when input is not required.
  • Validate input as soon as users have finished interacting with a field (but not before).
  • Always use with two text field components when range slider has dual thumbs to provide accessible alternatives to both the lower and upper thumbs.
Size Example Height Use
Default

Slider Spec

56dp Form

Note: In-cab size only. See mobile patterns (coming soon) for smaller options if required.

Behaviors

  • Adjust a slider’s value(s) by clicking and dragging its handle(s), or by clicking anywhere on its bar.
  • Hovering over an active slider’s handle will change the default cursor to the grab cursor; clicking will change it to the grab cursor.
  • Changes made with sliders are immediate.

All sliders should have the following states:

  • Default
  • Active
  • Focus
  • Disabled

Sliders Progression

State Primary
Default

Slider Default

Pressed

Slider Pressed

Focus

Segmented Controls Primary Disabled

Disabled

Slider Disabled

Combination

The slider can have many different combination like icons, input, buttons.

Label Variations
Left

Slider Options left label

Above

Slider Pressed

OEM Branding

  • This can be branded with primary color.

Sliders example

Last updated December 19, 2022.