A range slider enables the user to select a value range within a given numeric interval.

Range slider – live example

When to Use

Use the range slider:

• To provide graphical support for selecting a value range within a given numeric interval.

Don’t use the range slider:

• If the user only needs to select a single value within a predefined range. Use the slider instead.

Anatomy

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

2. Track (active or inactive)

3. Focused slider handle: Active handle for setting the value in focus.

4. Non-focused slider handle: Inactive handle indicating the other selected value.

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

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

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

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

Variants

The following range slider variants are available:

Basic range slider

Disabled range slider

Range slider with tooltip

Range slider with tooltip, tick marks, and labels

Behavior and Interaction

Changing the Value Range

If the range slider is editable, the hand cursor appears when the user hovers over the range slider. If tooltips have been activated, hovering over the slider also displays tooltips showing the current values for each handle. The handles move together with the corresponding tooltips.

The user can change the value range on the slider:

• By using drag and drop to adjust the handles. The handle snaps to the nearest incremental value.
• By clicking the track outside the selected value range. The corresponding handle then moves to the new position.
• By using the key combination Ctrl/Cmd + Arrow keys.

Range slider with tooltip, tick marks, and labels – live example

Moving the Entire Range

Users can move the entire value range by dragging and dropping the active segment of the track.

Equal Values

The handles of the range slider can be positioned on the same value.

Overlapping

The handles of the range slider can be moved across each other. The minimum can become the maximum, and vice versa.

Responsive Behavior

Related Links