Installation
pnpm dlx shadcn@latest add @clover-ui/price-rangeUsage
import { useState } from "react";
import { PriceRange, type PriceRangeValue } from "@/components/price-range";
export function Example() {
const [budget, setBudget] = useState<PriceRangeValue>([30000, 120000]);
return <PriceRange value={budget} onValueChange={setBudget} />;
}Drag either handle, or click anywhere on the track to move the closest one. The handle follows your pointer exactly, and the price rounds to a clean step picked from min and max (1K steps for 0 to 200K). Each handle can also be focused and moved with the arrow keys, Page Up and Page Down (bigger jumps), Home and End.
Currency
Pass a currency code and the labels show the symbol, like $30K.
<PriceRange currency="USD" defaultValue={[30000, 120000]} />Custom labels
<PriceRange
min={0}
max={500}
defaultValue={[50, 300]}
formatValue={(n) => `£${n}/night`}
/>Knob shape
<PriceRange knob="ring" defaultValue={[30000, 120000]} />Pick from circle, ring, pill and line.
Props
The selected range. Use with onValueChange.
Starting range when you don't control it. Defaults to 15% and 60% of the way along.
0200000Currency code such as "USD". Adds the symbol to the labels.
Replaces the default short format (30K).
Number of tick marks under the track.
25trueShape of the two handles.
"circle"Locks the handles and fades them. The bar and prices stay visible.
false