"use client"; import React, { useState, useMemo } from "react"; import { Slider } from "@/components/ui/slider"; import { motion } from "framer-motion"; import { Card } from "./card"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./tooltip"; interface RangeSliderWithHistogramProps { min?: number; max?: number; step?: number; histogramData?: number[]; onValueChange?: (values: [number, number]) => void; title?: string; formatValue?: (value: number) => string; minLabel?: string; maxLabel?: string; bufferPercentage?: number; inRangeClass?: string; outOfRangeClass?: string; className?: string; defaultValue?: [number, number]; renderTooltip?: (count: number, value: number) => React.ReactNode; } const RangeSliderWithHistogram: React.FC = ({ min = 50000, max = 5000000, step = 100000, histogramData, onValueChange, title = "Budget", formatValue = (value) => `₹${value.toLocaleString("en-IN")}`, minLabel = "Minimum", maxLabel = "Maximum", bufferPercentage = 0, inRangeClass = "bg-[#0A6EFF]", outOfRangeClass = "bg-gray-300", className, defaultValue = [min, max], renderTooltip, }) => { const [minValue, setMinValue] = useState(defaultValue[0]); const [maxValue, setMaxValue] = useState(defaultValue[1]); const numBars = Math.ceil((max - min) / step); const defaultHistogramData = useMemo( () => Array.from({ length: numBars }, () => Math.floor(Math.random() * 6000)), [numBars] ); const histogramDataToUse = histogramData ?? defaultHistogramData; const maxCount = useMemo(() => { const maxVal = Math.max(...histogramDataToUse); return maxVal === 0 ? 1 : maxVal; }, [histogramDataToUse]); const bufferRange = (maxValue - minValue) * bufferPercentage; const viewMin = Math.max(min, minValue - bufferRange); const viewMax = Math.min(max, maxValue + bufferRange); return (

{title}

{formatValue(minValue)} {formatValue(maxValue)}

{histogramDataToUse.map((count, index) => { const currentValue = min + index * step; const isInRange = currentValue >= minValue && currentValue <= maxValue; const isInView = currentValue >= viewMin && currentValue <= viewMax; const barColor = isInRange || isInView ? inRangeClass : outOfRangeClass; return ( {renderTooltip ? ( renderTooltip(count, currentValue) ) : (

Count: {count}
{formatValue(currentValue)}

)} ); })}

{ const [newMin, newMax] = values; setMinValue(newMin); setMaxValue(newMax); onValueChange?.([newMin, newMax]); }} />

{minLabel} {maxLabel}

); }; export default RangeSliderWithHistogram;

Budget Range Slider

Property Price Range

Install Dependencies