Price Range Slider

A dual-thumb price range filter slider that previews a ghost extension when hovering outside the selected range, with animated number values and thumb scaling.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Price Range Slider to your project and fits it to your theme.

import Slider06 from "@/components/ui/slider-06";

export default function Slider06Demo() {
  return (
    <div className="flex min-h-[400px] w-full items-center justify-center p-8">
      <Slider06 />
    </div>
  );
}