A slider enables the user to adjust a single value within a specified numerical range.

Slider – live example

When to Use

Use the slider:

• If you want to provide graphical support for changing a value.

Don’t use the slider:

• For decorative purposes.

Anatomy

1. Start point: Minimum value of the slider range.

2. Track (active or inactive)

3. Slider handle: Grip for setting the value.

4. Tooltip (optional): Displays a tooltip with the current value above the handle.

5. Tick marks (optional): Visualize the value intervals (steps). Each tick mark represents a selectable value.

6. Labels (optional): Labels some or all of the tick marks with their values.

7. End point: Maximum value of the slider range.

Variants

The following slider variants are available:

Basic slider

Disabled slider

Slider with tooltip

Slider with tooltip, tick marks, and labels

Behavior and Interaction

Changing the Value

If the slider is editable, the hand cursor appears when the user hovers over the slider.

The user can change the slider setting in the following ways:

• By using drag and drop to adjust the handle. The handle snaps to the nearest interval value.
• By clicking the track. The handle then moves to this new position.
• By using the key combination Shift/Cmd + Arrow keys.

Slider with tooltip, tick marks, and labels – live example

Responsive Behavior

Related Links