Primitive

Range

Two-thumb range control anatomy with filled rail and value row.

Use Range when a workflow coordinates two native range inputs over one visual rail. Keep ordering, min/max, clamping, and controlled tuple state in the owning component.
form
DOM renderImage render
RangeDefault
2080
Filter generated runs by model confidence.

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

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

Default

Two-thumb range control with value rail.
2080
Filter generated runs by model confidence.
Render state

Disabled

Locked selected interval.
3276
Render state

Narrow

Narrow selected range.
4258
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
start *number | string-Start fill percentage token/value.
end *number | string-End fill percentage token/value.
RangeInput.label *string-Accessible native range input label.
RangeValues.startReactNode-Displayed lower value.
RangeValues.endReactNode-Displayed upper value.