Slider
A draggable range slider for selecting numeric values. Supports labels, hints, sizes, steps, and disabled state.
Default
A basic slider with a label and value display.
Default
Volume40
Label and Hint
Slider with label and descriptive hint text.
Label and Hint
Brightness60
Adjust screen brightness.Sizes
Three sizes: sm, md, and lg.
Sizes
Small50
Medium50
Large50
Disabled
A disabled slider that cannot be interacted with.
Disabled
Disabled30
Custom Step
Slider with a step increment of 10.
Step
Step 1050
Controlled
A controlled slider with external state management.
Controlled
Controlled25
Current value: 25
Usage
Import the Slider component and configure with props.
tsx
import { Slider } from "@/components/ui/Slider";
// Basic
<Slider defaultValue={40} label="Volume" />
// With hint
<Slider defaultValue={60} label="Brightness" hint="Adjust screen brightness." />
// Controlled
const [val, setVal] = useState(25);
<Slider value={val} onChange={setVal} label="Controlled" />
// Disabled
<Slider defaultValue={30} label="Disabled" disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| min | number | 0 | Minimum value. |
| max | number | 100 | Maximum value. |
| step | number | 1 | Step increment. |
| value | number | — | Controlled value. |
| defaultValue | number | 0 | Initial value (uncontrolled). |
| onChange | (value: number) => void | — | Called on value change. |
| label | string | — | Label text. |
| hint | string | — | Hint text below the label. |
| showValue | boolean | true | Show current value. |
| size | "sm" | "md" | "lg" | "md" | Track and thumb size. |
| disabled | boolean | false | Disable the slider. |