forms
Slider
Example
Import
import { Slider } from '@connor-adams/designsystem'Usage
A single-value range control for budgets, thresholds, and filters (e.g. "alert when a transaction exceeds $X").
<Slider
min={0} max={500} step={10}
defaultValue={120}
showValue
format={(v) => `$${v}`}
onValueChange={setThreshold}
/>
Variants: min/max/step, showValue, format, disabled.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| min | number | undefined | 0 | |
| max | number | undefined | 100 | |
| step | number | undefined | 1 | |
| value | number | undefined | — | |
| defaultValue | number | undefined | 0 | |
| onValueChange | ((value: number) => void) | undefined | — | |
| disabled | boolean | undefined | — | |
| showValue | boolean | undefined | false | |
| format | ((value: number) => ReactNode) | undefined | — |