Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Usage
The default range slider is accompanied by a label and a number input that doubles as a display for the slider’s current selected value. The range slider has a label and one numerical/percentile input to display the slider’s selected value.
Provide descriptive labels
Do
Labels add additional context to the control being performed and its current selected value
Don't
A range slider without any labels may be ambiguous in its function; it is not accessible.
Use clear and contextual labels
Do
Use a percentile label to show the user their precise value
Don't
Don't assume users will understand intended values without percentile labels.
Use percentile value labels
Do
In events where you use a non percentile value, label the value correctly.
Don't
Don't leave the numerical values without context.
Related Components & Patterns