Slider
Draggable range input with optional marks, min/max, and step control.
Live Demo
Basic
Value: 40
With Marks
Disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Controlled value |
defaultValue | number | 0 | Default value (uncontrolled) |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
step | number | 1 | Step increment |
disabled | boolean | false | Disables the slider |
marks | SliderMark[] | — | Array of marks along the track |
onChange | (value: number) => void | — | Callback with new value |
Usage
import { Slider } from '@ghiberti85/ui'
const [value, setValue] = useState(40)
// Basic
<Slider value={value} onChange={setValue} aria-label="Volume" />
// With marks and step
<Slider
value={value}
onChange={setValue}
step={25}
marks={[
{ value: 0, label: '0' },
{ value: 50, label: '50' },
{ value: 100, label: '100' },
]}
aria-label="Level"
/>
// Disabled
<Slider defaultValue={60} disabled aria-label="Disabled" />