Min/Max Range Filter

Paired number inputs for open-ended ranges: either side can stay empty, so users can filter by only a minimum or only a maximum.

Price

to

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
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)}
/>

More Filter components

View all Filter

Price

$25$180

Range Slider Filter

filter-slider

Two-thumb range slider with live numeric readouts and a commit callback, built for price ranges.

Fit

32
14
21

Radio Filter

filter-radio

Single-select radio list with optional result counts. Clicking the active option clears the selection, so the filter is always escapable.

Rating

Rating Filter

filter-rating

Star rows for minimum-rating filtering in the familiar n-and-up pattern. Clicking the active row clears the selection.

Gender

Segmented Filter

filter-segmented

Single-select segmented control built on Tabs for mutually exclusive choices like gender or condition. Clicking the active segment clears the selection.

Category

24
18
9
12

Checkbox Filter

filter-checkbox

Multi-select checkbox list with optional result counts. Works controlled or uncontrolled, designed for filter sidebars and toolbars.

Category

Select Filter

filter-select

Single-select dropdown for long option lists that would crowd a sidebar. Supports a clear item, result counts, and a disabled state for dependent filters.