RangeSelector
Two bounded handles define an interval without crossing or hiding their values.
Live — this one is real
Usage
import { useState } from "react";
import { RangeSelector } from "mizu-ui";
export function Example() {
const [value, setValue] = useState<[number, number]>([20, 70]);
return (
<RangeSelector
label="Visible window"
value={value}
onValueChange={setValue}
min={0}
max={120}
format={(v) => `${v}s`}
/>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect interaction/RangeSelector.tsx
Source is included in the npm package under src/interaction/RangeSelector.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onValueChange | [number, number] / function | — | Controlled start and end. |
| min / max / step | number | 0 / 100 / 1 | Full interval and native step. |
| format | (value: number) => string | — | Visible and announced units. |
Accessibility
Two separately labelled native ranges share a fieldset legend. Start is bounded by end, end by start. Native keyboard and touch behavior.
Motion
Direct native input.