)} ); } export function RangeSlider({ value, defaultValue = 50, min = 0, max = 100, step = 1, snapToStepWhileDragging = false, onValueChange, onChange, onValueCommit, disabled = false, showTicks = true, tickType = "line", tickCount, showTooltip = "hover", formatTooltip, variant = "default", size = "md", label, leftLabel, rightValue, showLabels = false, showValue = false, className, trackClassName, rangeClassName, thumbClassName, }: RangeSliderProps) { const isControlled = value !== undefined; const initialValues = useMemo(() => { const raw = isControlled ? value : defaultValue; return Array.isArray(raw) ? [...raw] : [raw]; }, [isControlled, value, defaultValue]); const [values, setValues] = useState(initialValues); const valuesRef = useRef(initialValues); valuesRef.current = values; const [draggingIndex, setDraggingIndex] = useState(null); const trackRef = useRef(null); // Motion Values driving continuous high-FPS visual positions const motionPct0 = useMotionValue( Math.max(0, Math.min(100, ((initialValues[0] - min) / (max - min)) * 100)) ); const motionPct1 = useMotionValue( initialValues.length > 1 ? Math.max(0, Math.min(100, ((initialValues[1] - min) / (max - min)) * 100)) : 0 ); // Synchronize motion values if value prop updates programmatically useEffect(() => { if (isControlled) { const raw = Array.isArray(value) ? [...value] : [value]; setValues(raw); valuesRef.current = raw; const p0 = Math.max(0, Math.min(100, ((raw[0] - min) / (max - min)) * 100)); motionPct0.set(p0); if (raw.length > 1) { const p1 = Math.max(0, Math.min(100, ((raw[1] - min) / (max - min)) * 100)); motionPct1.set(p1); } } }, [isControlled, value, min, max, motionPct0, motionPct1]); const triggerChange = useCallback( (res: number | number[]) => { onValueChange?.(res); if (typeof res === "number") { onChange?.(res); } else if (Array.isArray(res) && res.length > 0) { onChange?.(res[0]); } }, [onValueChange, onChange] ); // Calculate raw continuous percentage (0-100) from pointer clientX const getRawPctFromClientX = useCallback( (clientX: number) => { const track = trackRef.current; if (!track) return 0; const rect = track.getBoundingClientRect(); return Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100)); }, [] ); // Convert raw percentage to stepped value const getValueFromPct = useCallback( (pct: number) => { let rawVal = min + (pct / 100) * (max - min); if (step > 0) { rawVal = Math.round((rawVal - min) / step) * step + min; } return Math.max(min, Math.min(max, Number(rawVal.toFixed(6)))); }, [min, max, step] ); // Pointer Down on Track: Starts continuous high-FPS drag immediately const handlePointerDown = useCallback( (e: React.PointerEvent) => { if (disabled) return; e.preventDefault(); const rawPct = getRawPctFromClientX(e.clientX); const steppedVal = getValueFromPct(rawPct); const currentValues = valuesRef.current; let targetIdx = 0; if (currentValues.length > 1) { const dist0 = Math.abs(currentValues[0] - steppedVal); const dist1 = Math.abs(currentValues[1] - steppedVal); targetIdx = dist0 <= dist1 ? 0 : 1; } setDraggingIndex(targetIdx); try { (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); } catch (_) {} // Set continuous visual position const visualPct = snapToStepWhileDragging ? ((steppedVal - min) / (max - min)) * 100 : rawPct; if (targetIdx === 0) motionPct0.set(visualPct); else motionPct1.set(visualPct); const next = [...currentValues]; next[targetIdx] = steppedVal; if (next.length === 2) { if (targetIdx === 0 && next[0] > next[1]) next[0] = next[1]; if (targetIdx === 1 && next[1] < next[0]) next[1] = next[0]; } valuesRef.current = next; setValues(next); const res = next.length === 1 ? next[0] : next; triggerChange(res); }, [disabled, getRawPctFromClientX, getValueFromPct, min, max, motionPct0, motionPct1, snapToStepWhileDragging, triggerChange] ); // Pointer Move: Glides continuously at 120 FPS const handlePointerMove = useCallback( (e: React.PointerEvent) => { if (draggingIndex === null || disabled) return; const rawPct = getRawPctFromClientX(e.clientX); const steppedVal = getValueFromPct(rawPct); const currentValues = valuesRef.current; const visualPct = snapToStepWhileDragging ? ((steppedVal - min) / (max - min)) * 100 : rawPct; // Update continuous motion value for butter-smooth visual glide if (draggingIndex === 0) motionPct0.set(visualPct); else motionPct1.set(visualPct); // Only update React state and callbacks when numeric value changes if (currentValues[draggingIndex] !== steppedVal) { const next = [...currentValues]; next[draggingIndex] = steppedVal; if (next.length === 2) { if (draggingIndex === 0 && next[0] > next[1]) next[0] = next[1]; if (draggingIndex === 1 && next[1] < next[0]) next[1] = next[0]; } valuesRef.current = next; setValues(next); const res = next.length === 1 ? next[0] : next; triggerChange(res); } }, [draggingIndex, disabled, getRawPctFromClientX, getValueFromPct, min, max, motionPct0, motionPct1, snapToStepWhileDragging, triggerChange] ); // Pointer Up: Soft-snaps visual position to step tick and commits value const handlePointerUp = useCallback( (e: React.PointerEvent) => { if (draggingIndex !== null) { try { (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId); } catch (_) {} const currentValues = valuesRef.current; const currentVal = currentValues[draggingIndex]; const finalPct = Math.max(0, Math.min(100, ((currentVal - min) / (max - min)) * 100)); // Soft-snap to exact step mark if (draggingIndex === 0) motionPct0.set(finalPct); else motionPct1.set(finalPct); setDraggingIndex(null); const res = currentValues.length === 1 ? currentValues[0] : currentValues; onValueCommit?.(res); } }, [draggingIndex, min, max, motionPct0, motionPct1, onValueCommit] ); // Keyboard navigation const handleKeyDown = useCallback( (e: React.KeyboardEvent, index: number) => { if (disabled) return; const currentValues = valuesRef.current; const current = currentValues[index]; const effStep = step > 0 ? step : (max - min) / 100; const largeStep = (max - min) / 10; let nextVal = current; switch (e.key) { case "ArrowRight": case "ArrowUp": nextVal = Math.min(max, current + effStep); break; case "ArrowLeft": case "ArrowDown": nextVal = Math.max(min, current - effStep); break; case "PageUp": nextVal = Math.min(max, current + largeStep); break; case "PageDown": nextVal = Math.max(min, current - largeStep); break; case "Home": nextVal = min; break; case "End": nextVal = max; break; default: return; } e.preventDefault(); nextVal = Number(nextVal.toFixed(6)); const next = [...currentValues]; next[index] = nextVal; if (next.length === 2) { if (index === 0 && next[0] > next[1]) next[0] = next[1]; if (index === 1 && next[1] < next[0]) next[1] = next[0]; } const finalPct = Math.max(0, Math.min(100, ((nextVal - min) / (max - min)) * 100)); if (index === 0) motionPct0.set(finalPct); else motionPct1.set(finalPct); valuesRef.current = next; setValues(next); const res = next.length === 1 ? next[0] : next; triggerChange(res); onValueCommit?.(res); }, [disabled, min, max, step, motionPct0, motionPct1, triggerChange, onValueCommit] ); // Robust Tick Generation: Always displays clean step lines across the slider const ticks = useMemo(() => { if (!showTicks) return []; // 1. Explicit tick count requested if (tickCount && tickCount > 1) { const interval = (max - min) / (tickCount - 1); return Array.from({ length: tickCount }, (_, i) => Number((min + i * interval).toFixed(6)) ); } // 2. Step-based ticks if step yields a sensible count (between 2 and 25) if (step > 0) { const totalSteps = Math.floor(Number(((max - min) / step).toFixed(6))); if (totalSteps >= 2 && totalSteps <= 25) { return Array.from({ length: totalSteps + 1 }, (_, i) => Number((min + i * step).toFixed(6)) ); } } // 3. Smart default: 7 evenly spaced tick marks across the range const defaultTickCount = 7; const interval = (max - min) / (defaultTickCount - 1); return Array.from({ length: defaultTickCount }, (_, i) => Number((min + i * interval).toFixed(6)) ); }, [showTicks, tickCount, min, max, step]); const isDual = values.length > 1; // Spring-smoothed active range fill driven directly by spring glide motions const smooth0 = useSpring(motionPct0, SPRING_GLIDE); const smooth1 = useSpring(motionPct1, SPRING_GLIDE); const fillLeft = useTransform(smooth0, (p0: number) => { if (!isDual) return "0%"; const p1 = Number(smooth1.get()); return `${Math.min(p0, p1)}%`; }); const fillWidth = useTransform(smooth0, (p0: number) => { if (!isDual) return `${p0}%`; const p1 = Number(smooth1.get()); return `${Math.abs(p1 - p0)}%`; }); const minVal = isDual ? Math.min(values[0], values[1]) : min; const maxVal = isDual ? Math.max(values[0], values[1]) : values[0]; const vStyles = variantStyles[variant]; const sStyles = sizeStyles[size]; const displayValText = isDual ? `${formatTooltip ? formatTooltip(values[0]) : values[0]} - ${formatTooltip ? formatTooltip(values[1]) : values[1]}` : `${formatTooltip ? formatTooltip(values[0]) : values[0]}`; return (

{/* Optional Top Header Label & Live Value */} {(label || (showValue && !rightValue && !leftLabel)) && (

{label && ( {label} )} {showValue && ( {displayValText} )}

)} {/* Main Track Block Container with Seamless 120 FPS Dragging */}

{/* Active Range Segment Fill */} {/* Inline Left Label (Matching image 2 style) */} {leftLabel && (

{leftLabel}

)} {/* Embedded Step Marks / Lines / Dots (Centered Across Track) */} {ticks.length > 0 && (

{ticks.map((t) => { const tickPct = ((t - min) / (max - min)) * 100; const isInside = t >= minVal && t <= maxVal; return ( ); })}

)} {/* Inline Right Value (Matching image 2 style) */} {(rightValue || (showValue && leftLabel)) && (

{rightValue || displayValText}

)} {/* Vertical Capsule Bar Thumbs with High-FPS Spring Glide */} {values.map((val, idx) => ( ))}

{/* Min & Max Labels Below Track */} {showLabels && (

{formatTooltip ? formatTooltip(min) : min} {formatTooltip ? formatTooltip(max) : max}

)}

); } export default RangeSlider; ``` ## Usage ```tsx import { RangeSlider } from "@/components/lightswind/range-slider" ``` ```tsx import { RangeSlider } from "@/components/lightswind/range-slider"; export function RangeSliderDemo() { return ( `$${v}`} onValueChange={(val) => console.log(val)} /> ); } ```