Paired number inputs for open-ended ranges: either side can stay empty, so users can filter by only a minimum or only a maximum.
The import and the props worth knowing about, in one place.
import { FilterRange } from "@/components/beste/component/filter-range";
<FilterRange
label="Price"
min={0}
max={500}
defaultValue={["25", ""]} // 25 and up
onChange={([min, max]) => console.log("range:", min, max)}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Optional group heading rendered above the inputs |
min | number | — | Placeholder for the minimum input |
max | number | — | Placeholder for the maximum input |
value | [string, string] | — | Controlled raw input values as [min, max] strings; either side may be empty for an open-ended range. Omit to let the component manage state. |
defaultValue | [string, string] | — | Initial values when uncontrolled |
onChange | (value: [string, string]) => void | — | |
className | string | — |