← Back to Design System
Slider
A control that lets users select a value or range within a given interval.
Base Example
<Slider defaultValue={[0, 25]} />Label Bottom
<Slider defaultValue={[10, 40]} labelPosition="bottom" />Label Top Floating
<Slider defaultValue={[20, 60]} labelPosition="top-floating" />Single Thumb
<Slider defaultValue={[50]} labelPosition="top-floating" />Custom Label Formatter
<Slider
defaultValue={[30]}
labelPosition="top-floating"
labelFormatter={(v) => `${v}px`}
/>API Reference
| Props | Type | Default | Description |
|---|---|---|---|
| value | number[] | - | Controlled value of the slider. |
| defaultValue | number[] | - | Initial value for uncontrolled mode. |
| min? | number | 0 | Minimum slider value. |
| max? | number | 100 | Maximum slider value. |
| step? | number | 1 | Step between values. |
| labelPosition? | 'default' | 'bottom' | 'top-floating' | "default" | Position of the thumb label. |
| labelFormatter? | (value: number) => string | (v) => v + "%" | Custom formatter for label text. |
| className? | string | - | Additional classes for styling. |