Slider
An input where the user selects a value from within a given range.
Installation
import { Slider } from "@sourceful-energy/ui"Usage
Examples
With Label and Value
50%
Custom Range
Charge Limit
80%
Limiting charge to 80% can extend battery life.
Disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number[] | - | The controlled value of the slider. |
| defaultValue | number[] | [0] | The default value when uncontrolled. |
| onValueChange | (value: number[]) => void | - | Callback when the value changes. |
| min | number | 0 | The minimum value. |
| max | number | 100 | The maximum value. |
| step | number | 1 | The stepping interval. |
| disabled | boolean | false | Whether the slider is disabled. |
Accessibility
- Built on Radix UI Slider for full accessibility
- Keyboard navigation (Arrow keys to adjust)
- ARIA attributes automatically managed
- Visible focus indicator on thumb