A slider is an input people use to select a numeric value within a given range (a minimum and a maximum).
Figma
The Figma reference for Slider will appear here once the design link is added.
Storybook
Interactive examples for Slider will render here once the Storybook link is wired in.
Best practices
- Always use it with a label, even if the label is visually hidden.
- When visible, the label should communicate the purpose and the values (min, max, step, current).
- Mark the field “(optional)” when the input isn’t required.
- Validate input once the person has finished interacting with the field — not before.
- When the slider has two thumbs, pair it with text fields so both bounds have accessible alternatives.
Do’s and don’ts
Do
Use a short, sentence-case label: “Banner width”.
Don’t
Phrase the label as a question or trailing sentence: “What is the saturation value?”, “The banner width is:”.