Slider
Range slider with keyboard support, customizable min/max/step. Client component.
Usage
tsx
1import { Slider } from '@storm-ds/ui'23<Slider defaultValue={50} />Default
Value: 50
tsx
1const [value, setValue] = useState(50)23<Slider value={value} onChange={setValue} />Sizes
Small
Medium
Large
tsx
1<Slider size="sm" defaultValue={30} />2<Slider size="md" defaultValue={50} />3<Slider size="lg" defaultValue={70} />Disabled
tsx
1<Slider disabled defaultValue={40} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | Controlled value |
| defaultValue | number | 0 | Initial value |
| min | number | 0 | Minimum value |
| max | number | 100 | Maximum value |
| step | number | 1 | Step increment |
| size | 'sm' | 'md' | 'lg' | 'md' | Slider size |
| disabled | boolean | false | Disables the slider |
| onChange | (value: number) => void | - | Called when value changes |
| className | string | - | Custom classes |
Use with AI
Create a Next.js component using Storm UI's Slider. Import: `import { Slider } from '@storm-ds/ui'`. Client component. Supports controlled (value + onChange) and uncontrolled (defaultValue) modes. Props: min, max, step, size (sm/md/lg), disabled. Keyboard accessible (arrow keys). Example: `<Slider defaultValue={50} min={0} max={100} step={5} onChange={(v) => console.log(v)} />`