RangeSlider

RangeSlider captures a low–high pair on a single scale. Two thumbs, each a role="slider", that clamp against each other so the low value can never pass the high.

What it is

A single component holding a [number, number] value. It renders two thumbs; each is its own role="slider" with its own aria-valuenow. The thumbs constrain one another — the low thumb's aria-valuemax is the high value, and the high thumb's aria-valuemin is the low value — so a drag or a keypress can narrow the range but never invert it.

Install

yarn add @usemotif/headless

import { RangeSlider } from '@usemotif/headless';

API

function RangeSlider(props: RangeSliderProps): JSX.Element

Keyboard

Each thumb is focusable on its own. With a thumb focused, Arrow Right and Up increase it, Arrow Left and Down decrease it, and Home and End move it to its current bound — for the low thumb, min and the high value; for the high thumb, the low value and max.

Accessibility

Each thumb is a separate role="slider" with its own value and its own announced range, so a screen-reader user moves between the two and adjusts each independently. The crossing constraint lives in the ARIA bounds, not just the visuals — the low thumb genuinely cannot be keyed past the high one.

Examples

A price-range filter:

<RangeSlider
aria-label="Price range"
value={priceRange}
onValueChange={setPriceRange}
min={0}
max={500}
step={10}
/>