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
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { FilterSlider } from "@/components/beste/component/filter-slider";
<FilterSlider
label="Price"
className="w-64"
unit="$"
defaultValue={[25,180]}
/>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 | — |
Paired number inputs for open-ended ranges: either side can stay empty, so users can filter by only a minimum or only a maximum.
Searchable dropdown for very long option lists like brands. Type to narrow options, select one or many, and see result counts inline.
Multi-select checkbox list with optional result counts. Works controlled or uncontrolled, designed for filter sidebars and toolbars.
Dropdown with checkbox rows and a selection-count badge. Keeps many-option filters compact in toolbars where a checkbox list would not fit.