Components

Range Slider

Two thumbs on one track, for a span like an amount from $50 to $500.

Amount$50 – $500

Import

import { RangeSlider } from '@rinzai/zen';

API reference

<RangeSlider>

Two thumbs on one track, for a span such as an amount from $50 to $500: two native range inputs (keyboard, forms and screen readers work as on Slider), the span between them filled. The thumbs can meet but not cross.

Prop	Type	Default
`label`Required Accessible name of the pair, e.g. "Amount".	`string`	`—`
`value`Required The span, low then high.	`readonly [number, number]`	`—`
`className`	`string`	`—`
`disabled`	`boolean`	`—`
`max`	`number`	`100`
`min`	`number`	`0`
`onValueChange` While dragging (every step).	`((value: [number, number]) => void)`	`—`
`onValueCommit` Once the user lets go: the moment to save or filter.	`((value: [number, number]) => void)`	`—`
`step`	`number`	`1`
`thumbLabels` Each thumb's name (default "Minimum", "Maximum").	`readonly [string, string]`	`['Minimum', 'Maximum']`
`valueText` Spoken value of a thumb, e.g. (v) => `$${v}`.	`((value: number) => string)`	`—`