shadcn.io is an independent project built on shadcn/ui
Price Range is the title. The line reads Set your budget range ($200 - $800) and both numbers follow the thumbs. The track runs from 0 to 1000 and steps by 10.
Use it for a low and a high on one control, such as a price filter. One amount people type is a Number Input. React with Ark UI does not apply the filter.
Installation
Anatomy
Usage
<Field className="max-w-md">
<FieldTitle>Price Range</FieldTitle>
<FieldDescription>
Set your budget range ($
<span className="font-medium tabular-nums">{value[0]}</span> -{" "}
<span className="font-medium tabular-nums">{value[1]}</span>).
</FieldDescription>
<Slider
aria-label={["Minimum price", "Maximum price"]}
className="mt-2"
max={1000}
min={0}
onValueChange={handleValueChange}
step={10}
value={value}
/>
</Field>FAQ
Why does the price slider use an array?
value starts as 200 and 800. Two numbers draw two thumbs, the low end and the high end of the range.
What are the limits and the step?
The range is 0 to 1000 and step is 10. The bounds are min and max. Each move snaps to that step.
How does the sentence show both prices?
FieldDescription prints both numbers from value, inside Set your budget range. font-medium and tabular-nums on each number keep the digits aligned as they change.
Update value from onValueChange.
What names the slider?
FieldTitle is the visible caption, Price Range. aria-label on Slider names the control, because FieldTitle is a visual title.
API Reference
Field
No extra props in this demo. The rest is on the Field page.
Slider
Sets aria-label={["Minimum price", "Maximum price"]}, max={1000}, min={0}, onValueChange={handleValueChange}, step={10} and value={value}. The rest is on the Slider page.
