ui
Slider
An input where the user selects a value from within a given range.
1. Import
Import the slider component from the design system.
import { Slider } from "@/design-system/components/ui/slider"2. Props
Slider component props.
| Prop | Type | Default |
|---|---|---|
| value | number | number[] | -- |
| defaultValue | number | number[] | -- |
| min | number | 0 |
| max | number | 100 |
| step | number | 1 |
| onValueChange | (value: number | number[]) => void | -- |
| disabled | boolean | false |
| className | string | -- |
3. Usages
Common slider patterns and configurations.
import { Slider } from "@/design-system/components/ui/slider";
export function Example() {
return <Slider defaultValue={[75]} max={100} step={1} className="mx-auto w-full max-w-xs" />;
}