Slider

Use a slider when users need to select from a range where relative position is more important than exact values.

Status

Component checklist

Component (RN)

React Native Component Status

Not Started

Figma (RN)

Figma Component Status

Published

Code (Web)

HTML/CSS Code

Published

Figma (Web)

Figma Component Status

Published

Key Points

  • Sliders are an input type that allows users to change a value across a range using a graphical slider
  • Sliders are always composed with an input field inline, which both displays and controls the slider position
  • Sliders can be set to move in stepped increments
  • Sliders' label, helper text, or optional text can be hidden or shown
  • The input field provides an alternative way to set values for users who cannot use or prefer not to use the slider

Use a slider to allow users to select a value from a continuous or stepped range.