Slider
A control for selecting a numeric value within a range.
Import
import { Slider } from "@retents/ui/slider"Usage Guidelines
When to use
- For selecting a numeric value within a continuous range (e.g., volume, brightness, price range).
- When the exact value is less important than the relative position within a range.
- When the user benefits from visual feedback of their selection.
When NOT to use
- When an exact number is needed — use Input with
type="number"instead. - For discrete, non-numeric choices — use RadioGroup or Select instead.
Preview
Value: 50
Usage
<Slider defaultValue={[50]} max={100} step={1} />