Price Range

Two amount fields for a from/to budget, with an optional slider once a ceiling exists. Emits { start, end }, or null while both ends are empty, so an untouched field stays distinguishable from a range of zero.

Default

With no max the range is open-ended and there is no slider. Two amount fields, each with the currency in an addon.

Start from

Up to

null

Bounded

Give it a max and the slider appears, with the two bounds printed underneath. A slider says the answer lives between these two numbers, which is a promise the field cannot keep without a real ceiling, so it stays hidden until one is configured.

Start from

Up to

Rp 0Rp 100,000,000

Slider off

showSlider=false keeps the bounds for clamping but drops the track. Useful in a dense form where the two fields are enough.

Start from

Up to

Currency and step

currency is a plain string in the input addon, not a formatter: the fields hold raw numbers. step only affects the slider's increments.

Start from

Up to

$ 0$ 10,000

Labels and placeholders

startLabel and endLabel default to "Start from" and "Up to". Placeholders are empty by default so the fields do not read as pre-filled.

Disabled

Both fields and the slider go inert.

Start from

Up to

Rp 0Rp 100,000,000

Typing, clamping and order

Three rules that only show up once someone types into it, all deliberate:

Keystrokes pass through unclamped. Clamping mid-typing would rewrite "50" to the minimum before the user reaches "50,000,000". Clamping happens on blur, one tick after InputNumber's own.
An out-of-order pair is swapped on blur, not flattened. Two numbers were typed and a range of those two is the obvious reading; pushing one onto the other would throw the older of them away.
min and max are read in sorted order rather than trusted as given. A live preview re-renders on every keystroke, so it can see min=500,000,000 against max=100,000,000 for as long as it takes to retype the ceiling, and clamping against an inverted pair pins every value to the smaller number.

API Reference

PriceRange

Prop	Type	Default	Description
`modelValue`	`{ start: number \| null, end: number \| null } \| null`	`null`	The range. Supports v-model. null while both ends are empty; emits null again if the user clears both.
`min`	`number`	`0`	Floor for clamping and the slider start.
`max`	`number \| null`	`null`	Ceiling. null leaves the range open-ended: no clamp at the top, and no slider.
`step`	`number`	`1`	Slider increment. Values below 1 fall back to 1. Does not restrict typed input.
`currency`	`string`	`"Rp"`	Text in each field's addon and on the two bound captions. Display only.
`showSlider`	`boolean`	`true`	Opt out of the track. Even when true the slider needs a max and a non-zero span before it renders.
`disabled`	`boolean`	`false`	Disables both fields and the slider.
`id`	`string`	`undefined`	Lands on the start field, so a FieldLabel's for can point at something real.
`startLabel`	`string`	`"Start from"`	Caption above the start field.
`endLabel`	`string`	`"Up to"`	Caption above the end field.
`startPlaceholder`	`string`	`""`	Placeholder for the start field.
`endPlaceholder`	`string`	`""`	Placeholder for the end field.

Event	Description
`update:modelValue`	Fires on every keystroke, on the blur that clamps or swaps, and on slider drag. Slider output is already valid, so it needs no commit step.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Tab`	Start field, end field, then each slider thumb.
`←` + `→`	On a thumb, moves by one step.
`Home` + `End`	On a thumb, jumps to the minimum or maximum.

The two captions are spans, not labels: pass id and let the surrounding Field own the accessible name, otherwise the start field is the only one a for can reach.
The slider is the reka Slider, which stops the thumbs crossing, so a dragged range can never come back out of order.

Preview Panel Progress