Range sliderPro

• Filtering by a range: price, dates as numbers, sizes, scores.

• One value: use a slider.
• Exact numbers: add inputs beside it.

Import it from @/components/ui/range-slider after installing.

import * as React from "react";
import { RangeSlider } from "@/components/ui/range-slider";

export function PriceFilter() {
  const [range, setRange] = React.useState<[number, number]>([100, 400]);
  return <RangeSlider aria-label="Price" min={0} max={600} step={10} value={range} onValueChange={setRange} format={(n) => `$${n}`} histogram={counts} />;
}

• Each thumb is a labelled slider ("Price minimum", "Price maximum") whose limits respect the other thumb.
• Clicking the track moves the nearest thumb and focuses it.

• Histogram bars grow in a wave and change color as the range moves; thumbs grow while active; bubbles pop above them.

• Fills its container; touch drags work anywhere on the track.

• Drags use window listeners and only update the two values.

• Fetch results in onValueCommit, not onValueChange.