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 with an optional trailing string.
  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.
  6. String (Optional): A text label aligned to the end of the slider, for showing a unit, limit, or contextual value alongside the range.
  7. Tick marks (Optional): Tick marks indicators show which predetermined values can be chosen on the slider. The slider handle snaps to the closest stop.
  8. Help or info tooltip (Optional): A small icon users can tap to see extra information about what the slider does or how to use it.

Variants

Default

Default variation of the slider.

Modifiers

Tick marks

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

Android 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.

Android slider with assistive text.

String

The String displays the current numeric value of the slider at the position of the thumb (the end handle). It can be toggled on or off depending on whether you want users to see a precise readout alongside the visual slider position.

Android slider with string.

Help or info icon

The help or info icon is an optional element. When interacted with, it triggers a tooltip with additional information about the slider. This element is useful when the label alone may not be enough to guide the user.

Android slider with help icon beside the label.

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.

Start position

Android slider with handle at start position.

Middle position

Android slider with handle at middle position.

End position

Android slider with handle at end position.

Interactive states

Outlines the atomic level interactive elements for the component.

Default state

Android slider in default interactive state.

Active state

Android slider in active interactive state.

Disabled state

Android slider in disabled interactive state.

Examples

LTR examples

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

Android slider examples in left-to-right context.

RTL examples

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

Android slider examples in right-to-left context.
Back to top