Price Range

Installation

Installs are paused for now. You can still preview and customize every component on its page.

Usage

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