Component · Inputs · 10
Slider
Slider = a 4px track with a 20px knob and a readable value, used for ranges rather than precise entry.
What is a Slider?
A slider picks a number inside a range. Name the track, the knob, the step, and where the value is displayed.
Variants
Tap a property to highlight it in the preview.
- A select that picks exactly one value from its menu.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- A control that cannot be interacted with; show it dimmed and non-focusable.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- Say this state explicitly in the prompt.
- The keyboard-focused state — a visible ring or border change. Never remove it.
- A control that cannot be interacted with; show it dimmed and non-focusable.
Anatomy
These are the parts to name in your prompt.
- 01 Track
- 02 Filled track
- 03 Knob
- 04 Value label
- 05 Tick marks
When to use
- Volume, opacity and other continuous values
- Price and duration filters with a visible min and max
- Settings where precision matters less than feel
Avoid when
- The user needs an exact number — use Input
- The range has fewer than five meaningful steps — use Select
- The value is the main content — show it as text
Always print the number next to the slider — nobody can tell 61 from 62 by eye.
See also
Create a slider component.
STYLE
- 4px track #E5E5EA, filled portion #0071E3, 2px radius
- 20px white knob with a 1px shadow, grows to 22px while dragging
- step 1, value shown in a 12px label above the knob
- tick marks 2px tall every 25% of the range
STATES
- default, dragging, focus-visible 2px accent ring, disabled 40%
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui