Two-thumb range slider with live numeric readouts and a commit callback, built for price ranges.
The import and the props worth knowing about, in one place.
import { FilterSlider } from "@/components/beste/component/filter-slider";
<FilterSlider
label="Price"
min={0}
max={300}
step={5}
unit="$"
defaultValue={[25, 180]}
onChange={(value) => console.log("dragging:", value)}
onCommit={(value) => console.log("committed:", value)} // fetch here
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Tab | Move between the two thumbs. |
|---|---|
| Arrow keys | One step on the focused thumb. |
| Home / End | Send the focused thumb to its end of the range. |
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 slider |
min | number | — | |
max | number | — | |
step | number | — | |
unit | string | — | Prefix shown before the numeric readouts, e.g. "$" |
value | [number, number] | — | Controlled range; omit to let the component manage its own state |
defaultValue | [number, number] | — | Initial range when uncontrolled |
onChange | (value: [number, number]) => void | — | Fires on every thumb move |
onCommit | (value: [number, number]) => void | — | Fires when the user releases a thumb; use it to trigger fetches |
className | string | — |