Range slider

Two-thumb range adjustment with an aligned filled rail and controlled tuple value.

Range slider is a component because it coordinates two native range inputs while keeping the visual rail deterministic.

Confidence range

2080

Playground

Props in the URL.

Controls update query params directly. Complex slots use curated fixtures so component states stay deterministic, linkable, and screenshot-ready.

Loading playground.

States

Every state maps to the same component render route through the `state` query param.

Confidence range

2080

Default

Selected range on a 0-100 scale.

Confidence range

4258

Narrow

Narrow range for filtering.

Confidence range

595

Wide

Broad inclusive range.

Props

Name	Type	Default	Description
`value`	`RangeSliderValue`	-	Controlled lower/upper tuple.
`defaultValue`	`RangeSliderValue`	`[20, 80]`	Uncontrolled initial tuple.
`min`	`number`	`0`	Minimum scale value.
`max`	`number`	`100`	Maximum scale value.
`step`	`number`	`1`	Native range step.
`onValueChange`	`(value: RangeSliderValue) => void`	-	Receives the ordered tuple.
`label`	`ReactNode`	-	Field label.