shadcn.io is an independent project built on shadcn/ui
Price Range labels a track with two thumbs. It opens at $200 and $800, and those prices sit under the track.
Use it in a product filter next to other facets. Add a Number Input at each end if shoppers type the bounds. In React, Base UI does not format the prices.
Installation
Anatomy
Usage
<div className="flex w-full max-w-md flex-col gap-2">
<Label>Price Range</Label>
<Slider
aria-label="Price range"
max={1000}
min={0}
onValueChange={handleValueChange}
value={value}
/>
<div className="flex items-center justify-between text-muted-foreground text-sm tabular-nums">
<span>${value[0]}</span>
<span>${value[1]}</span>
</div>
</div>FAQ
How does the readout follow the thumb?
The value lives in state, starting at [200, 800], and goes back to the slider as value. The two prices under the track print value[0] and value[1] with a dollar sign.
onValueChange receives the new value, and the handler stores it as an array.
How are the thumbs named?
Price Range is a visible Label.
On Base UI, aria-label names the slider Price range.
API Reference
Label
No extra props in this demo. The rest is on the Label page.
Slider
Sets aria-label="Price range", max={1000}, min={0}, onValueChange={handleValueChange} and value={value}. The rest is on the Slider page.
