Forms
Slider
Slider is a control for selecting a numeric value or range within a defined min/max by dragging a handle along a track.
Style (Default/Success/Warning/Danger) — 4 variants
Figma documentedReact not implementedDocumentation only
This page documents the Figma component and usage rules. It is not a production-ready React implementation and does not include a live preview.
- Figma availability
- available
- React availability
- unavailable
- Documentation completeness
- partial
- Maturity
- documented
Known limitation: No numeric "value" property exists — Figma component properties don't support a float/number type.
Purpose
Slider is a control for selecting a numeric value or range within a defined min/max by dragging a handle along a track.
When to use
A value with a naturally continuous or steppable range (volume, brightness, price range filters).
When not to use
When precise exact-number entry matters more than approximate visual positioning.
Accessibility
Renders as role="slider" with aria-valuenow/min/max, and must support arrow-key adjustment, not just drag.
Common mistakes
Implementing drag-only interaction with no keyboard support.
Properties
Style as variants, shown at a fixed demo fill percentage.
Tokens used
semantic/border/defaultsemantic/action/primarysemantic/surface/default
Known limitation
No numeric "value" property exists — Figma component properties don't support a float/number type.