Range Input

Dual min / max numeric input for bounded ranges — price per night, size, distance, nights. Each field coerces on blur and clamps to floor / ceiling. A unit suffix (e.g. "$", "km") renders inside the inputs. Supports custom display formatters.

core/range-input

Installation

1 · Add registry to components.json

2 · Install component

Examples

Default

Price range, distance, no-label, and disabled examples.

Price per night

$50 – $300

Distance from center

Distance

Nights (no label)

Disabled

Guest rating

API Reference

Prop	Type	Default	Description
`value`req	`RangeValue`	—	Controlled { min?, max? } range.
`onChange`req	`(value: RangeValue) => void`	—	Called when either bound changes (on blur).
`floor`	`number`	—	Absolute lower bound. The min field cannot go below this.
`ceiling`	`number`	—	Absolute upper bound. The max field cannot exceed this.
`step`	`number`	`1`	Step for the HTML number inputs.
`unit`	`string`	—	Unit suffix rendered inside each field (e.g. "$", "km").
`label`	`string`	—	Optional label rendered above the inputs.
`formatValue`	`(v: number) => string`	—	Custom display formatter. Applied to the field value when not focused.
`disabled`	`boolean`	—	Disables both inputs.