/// Inputs

RangeSlider

Two-thumb range control — a hairline track with an ink fill between a low and high value.

import { RangeSlider } from "@protocore/pds";

View as Markdown

Basics

Pass a [low, high] tuple. Each thumb moves independently and can't cross its neighbour; onValueChange returns the next [low, high] pair.

Latency SLO band: 120–480 ms

Steps & marks

Constrain movement with step, keep a gap between thumbs with minStepsBetweenThumbs, and draw ticks at raw values with marks.

Autoscale between 25% and 75% CPU

When to use it

Use a RangeSlider for a bounded min/max band on a continuous scale — a price range, a latency window, an acceptable-value corridor. When users need a single threshold, use Slider; when they must type exact figures, pair with (or use) two NumberInputs; for a calendar range, use DateRangePicker. Always surface both live values in nearby text — thumb positions alone aren't a readout.

Usage

Show both live values in adjacent text — the track is not a precise readout.
Name each thumb via `minLabel` / `maxLabel`.
Set a `step` so keyboard and drag land on usable increments.
Use `minStepsBetweenThumbs` when a zero-width band is meaningless.

Don't

Don't use it when exact values must be entered — use NumberInputs.
Don't hide the current values; position alone fails for precise or a11y use.
Don't set so many `marks` that the track becomes noise.
Don't use a range when a single threshold is enough.

Accessibility

Keys	Action
`Tab`	Move focus to the next thumb (lower, then upper).
`Arrow Left / Down`	Decrease the focused thumb by one step.
`Arrow Right / Up`	Increase the focused thumb by one step.
`Home / End`	Jump the focused thumb to its min / max.
`Page Up / Page Down`	Move by a larger increment.

Built on Radix Slider: each thumb is a `role="slider"` with `aria-valuemin`, `aria-valuemax`, and `aria-valuenow`.
The lower and upper thumbs are labelled 'Minimum' and 'Maximum' by default — override with `minLabel` / `maxLabel`.
Thumbs can't cross; each is bounded by its neighbour.

`RangeSlider` props

Prop	Type	Default	Description
`asChild`	`boolean`	—
`className`	`string`	—
`defaultValue`	`RangeValue`	`[min, max]`	Initial `[low, high]` value in uncontrolled mode.
`marks`	`number[]`	—	Optional tick marks drawn on the track at these raw values.
`max`	`number`	`100`	Maximum bound.
`maxLabel`	`string`	`Maximum`	Accessible label for the upper thumb.
`min`	`number`	`0`	Minimum bound.
`minLabel`	`string`	`Minimum`	Accessible label for the lower thumb.
`minStepsBetweenThumbs`	`number`	`0`	Minimum number of steps the two thumbs must keep between them.
`onValueChange`	`((value: RangeValue) => void)`	—	Fires with the next `[low, high]` pair as either thumb moves.
`step`	`number`	`1`	Step increment.
`style`	`CSSProperties`	—
`value`	`RangeValue`	—	Controlled `[low, high]` value.