Use the slider component to allow users to select a numeric value from a range by dragging a thumb along a track.
Usage Guidelines
Do
Provide contextual labels. The Mood and Numeric variants have these built in, but the basic one would need something descriptive, such as a title.
Provide visual feedback. For the numeric slider, this is automatically satisfied by the numbers changing on the handle. For the mood slider, this would be satisfied by the feedback slider pattern.
Use sufficient touch targets for the handle. Resist the urge to make it smaller!
Don't
When adding additional visual feedback, don’t rely solely on color. Use additional cues like shapes, labels, or patterns to convey information for colorblind users.
Don’t overcrowd the interface with sliders.
Don’t use sliders for binary choices.
Accessibility
Touch zone is very important here, and must be at least 48 by 48 px. The “handle” as its currently designed fulfills this.
Contrast is also important. It should be obvious when the active track is present, and when it’s not.
Props
Name
Type
Required
Description
onChange
Required
The function to call when the slider value changes.
value
number
Required
The current value of the slider.
disabled
boolean
If true, the slider will be disabled.
errorText
string
helperText
string
inlineLabels
boolean
If true, displays min and max labels inline on both ends of the track.
labels
Labels to show below the slider track.
maximumTrackTintColor
string
The color of the track to the right of the thumb.
maximumValue
number
The maximum value of the slider.
minimumTrackTintColor
string
The color of the track to the left of the thumb.
minimumValue
number
The minimum value of the slider.
showSelection
boolean
If true, the slider will show the current value as text.
step
number
The step value of the slider.
thumbTintColor
string
The color of the thumb.
title
string
The title of the slider field.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Related
Number field
Examples
Basic Slider
Slider with Box Shadow
Demonstrates the box shadow styling on the slider thumb
Slider with Box Shadow
The slider thumb has a box shadow applied using the boxShadow CSS property: "0px 2px 4px rgba(0, 0, 0, 0.25)"
Drag to see the shadow
50
The shadow creates depth and visual feedback when interacting with the slider thumb.