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)}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { FilterRange } from "@/components/beste/component/filter-range";
<FilterRange
label="Price"
className="w-64"
defaultValue={["25",""]}
/>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 | — |
Two-thumb range slider with live numeric readouts and a commit callback, built for price ranges.
Single-select radio list with optional result counts. Clicking the active option clears the selection, so the filter is always escapable.
Star rows for minimum-rating filtering in the familiar n-and-up pattern. Clicking the active row clears the selection.
Single-select segmented control built on Tabs for mutually exclusive choices like gender or condition. Clicking the active segment clears the selection.