Sliders

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.

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

Combination

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

OEM Branding

• This can be branded with primary color.