Forms
Range (Dual)
A slider with two thumbs for a range, such as a price band.
ReactVueWeb Components
View in Storybook Playground
Examples
<RangeDual min={0} max={1000} step={10} defaultValue={[200, 800]} />Props
| Name | Type | Default | Description |
|---|---|---|---|
min | number | 0 | Minimum bound. @default 0 |
max | number | 100 | Maximum bound. @default 100 |
step | number | 1 | Step. @default 1 |
value | RangeDualValue | — | Controlled `[low, high]` value. |
defaultValue | RangeDualValue | — | Initial value when uncontrolled. @default [min, max] |
onChange | (value: RangeDualValue) => void | — | Called with the updated `[low, high]`. |
disabled | boolean | false | Disable both thumbs. @default false |
minLabel | string | Minimum | Accessible label for the lower thumb. @default 'Minimum' |
maxLabel | string | Maximum | Accessible label for the upper thumb. @default 'Maximum' |
id | string | — | |
className | string | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.