Skip to main content

Slider

A slider is an interactive element for selecting values or ranges by dragging a handle along a track.

Dos and Don'ts

Do
  • Always visually highlight the selected value within the trailing label of the form label, ensuring the user can easily see their precise choice.
Don't
  • Don’t use when an element is displaying the status or completion of a task, using the Progress Bar instead.
  • Don't use when exact values are critical. If a user must select an exact number, a text input is usually more appropriate.

Anatomy

Anatomy of a slider that contains a form label, progress line, progress container, handle, and assistive text.
  1. Form label (optional): The form label provides necessary content / information to a form.
  2. Progress line: Illustrates the visual representation of the selection.
  3. Progress container: Shows a user’s available minimum and maximum values on the range to select from.
  4. Handle: An indicator that can be moved on the track within the slider range to specify a selected value.
  5. Assistive text (optional): The assistive text provides additional instructional information / error / success messaging.

Variants

Default

Default variant of the slider with a label and track.

Modifiers

Tick marks

Tick marks are used to indicate specific values, providing users with clear reference points to move their handle to.

Slider with tick marks.

Assistive text

Assistive text can be used to add additional information for the user in order to help them use the form element.

Slider with assistive text.

Interactions

Users can adjust the handle's position by either dragging it along the progress container or tapping directly on a specific point within the container to reposition the handle.

In its active state the handle responds by changing to its Liquid Glass state, allowing users to see the track beneath.

Slider showing interactive state.
Slider showing interactive state where the handle changes to Liquid Glass.

Interactive states

Outlines the atomic level interactive elements for the component.

Default

Slider in default state.

Disabled

Slider in disabled state.

Examples

LTR examples

Here are some examples of the component in left-to-right context:

Slider example in left-to-right context showing a volume control at 50%.

RTL examples

Here are some examples of the component in right-to-left context:

Slider examples in right-to-left context showing a volume control at 50%.
Back to top