Intro

A range slider is a user interface control that enables the user to select a value range within a predefined numerical interval.

Range slider

When to Use

Use the range slider:

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

Don't

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

Anatomy of a range slider

Start point: Minimum value of the slider range.
Track (active or inactive)
Value indicator (optional): Displays a value indicator with the current value above the handle.
Tick marks (optional): Visualize the value intervals (steps). Each tick mark represents a selectable value.
End point: Maximum value of the slider range.
Focused slider handle: Active handle for setting the value in focus.
Non-focused slider handle: Inactive handle indicating the other selected value.

Types

The following range slider variants are available:

Range slider types

A. Basic range slider: Lets users select a range of values between a defined minimum and maximum. It includes two handles that can be dragged independently to adjust the start and end values of the range.

B. Range slider with tick marks: Lets users select a range of values using two handles, with visible tick marks that indicate predefined steps. Tick marks help users align their selections to consistent intervals.

C. Range slider with input field: Lets users select a range of values using two handles. It also includes editable input fields above each handle, allowing precise value entry in addition to manual dragging.

D. Range slider with tick marks and input field: Combines manual range selection with visual guidance and direct input. Users can drag the handles along preset tick marks or enter exact values in the input fields above each handle.

E. Range slider with custom handle input: Lets users select a range using two handles with custom labels, such as months instead of numbers. The labels appear as tooltips above the handles and update as users drag them along the track. Shorter labels tend to work better in tooltips.

hint

To use custom scales in a range slider, you must map them to the floats for the range slider scale.

Behavior and Interaction

Adjusting the Range

If the range slider is editable, the hand cursor appears when hovering over the range slider handles with the mouse. A tooltip also appears when hovering, displaying the current values of each handle. The handles move together with the corresponding tooltips.

The user can change the value range on the slider in two ways:

Drag a handle or click the track to select a range
Click anywhere on the track outside the selected range. The nearest handle jumps to the clicked position.

The handles can be moved with or without increments based on the predefined steps.

Range slider on hover

Interactions

Range slider interactions

A. Range Slider with Input Fields: The range slider can be used with input fields instead of tooltips.

B. Moving the Entire Range: Users can move the entire value range by dragging the active track.

C. Equal Values: The handles of the range slider can be positioned on the same value.

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

States

The range slider comes with 4 different states, as follows:

Range slider states

A. Regular state for entire component: In its default state, when the range slider is active but not being interacted with, both handles are visible and can be moved to adjust the selected range. The current selection appears as a highlighted section of the track.

B. Hover state for input: Hovering over a handle brings up a tooltip showing its current value. Users can click the tooltip to enter a value directly, positioning the handle on that side of the range slider.

C. Down state (adjust range): The down state appears when a user clicks and holds a handle. The handle and its tooltip remain visually connected, indicating the handle is being dragged.

D. Disabled state for entire component: The entire range slider is non-interactive in the disabled state. Users cannot move the handles, click the track, or enter values. The component appears faded to indicate it is inactive.

Responsiveness

The range slider itself is not responsive. It adjusts to the responsiveness of its parent container by recalculating and resizing the width of the control. The range slider supports the cozy and compact form factors.

Localization

The range slider can support both left-to-right and right-to-left layouts. In right-to-left contexts, the track direction and handle movement are reversed to match the reading flow.