Component

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.
form
DOM renderImage render
Range sliderDefault
7294
Keeps only high-confidence model outputs in the review queue.
1248

Playground

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

Loading playground

Rendered matrix

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

Default

Dense range controls for confidence and cost filters.
7294
Keeps only high-confidence model outputs in the review queue.
1248
Render state

Narrow

Narrow range for filtering.
4258
Render state

Wide

Broad inclusive range.
595
Render state

Stepped

Stepped range on a bounded score scale.
2575
Quarter-step filter for coarse generated interface scoring.
Render state

Error

Range with validation feedback.
2080
Choose a narrower confidence band.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
valueRangeSliderValue-Controlled lower/upper tuple.
defaultValueRangeSliderValue[20, 80]Uncontrolled initial tuple.
minnumber0Minimum scale value.
maxnumber100Maximum scale value.
stepnumber1Native range step.
onValueChange(value: RangeSliderValue) => void-Receives the ordered tuple.
labelReactNode-Field label.