"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { motion, animate, type AnimationPlaybackControls, } from "framer-motion"; import { Wallet, Zap } from "lucide-react"; import { cn } from "@/lib/utils"; export type RangeSliderProps = { min?: number; max?: number; step?: number; value: number; onChange?: (value: number) => void; /** Formats the number shown inside the tooltip. */ format?: (value: number) => string; label?: string; disabled?: boolean; className?: string; /** Fires true while the user hovers, focuses or drags the control. */ onInteractChange?: (interacting: boolean) => void; }; /** * A controlled single-value range slider with a gradient-filled track, * a glossy thumb that scales on grab, and a value tooltip that tracks it. * Fully keyboard accessible (arrows, Page Up/Down, Home/End). */ export function RangeSlider({ min = 0, max = 100, step = 1, value, onChange, format = (v) => String(v), label = "Value", disabled = false, className, onInteractChange, }: RangeSliderProps) { const trackRef = useRef(null); const [grabbing, setGrabbing] = useState(false); const range = max - min || 1; const clamped = Math.min(max, Math.max(min, value)); const percent = ((clamped - min) / range) * 100; const pct = Math.round(percent * 100) / 100; const commit = useCallback( (clientX: number) => { const rect = trackRef.current?.getBoundingClientRect(); if (!rect || rect.width === 0) return; const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width)); const stepped = Math.round((min + ratio * range) / step) * step; onChange?.(Math.min(max, Math.max(min, stepped))); }, [min, max, range, step, onChange] ); function onPointerDown(e: React.PointerEvent) { if (disabled) return; e.currentTarget.setPointerCapture(e.pointerId); setGrabbing(true); onInteractChange?.(true); commit(e.clientX); } function onPointerMove(e: React.PointerEvent) { if (!grabbing || disabled) return; commit(e.clientX); } function endGrab(e: React.PointerEvent) { if (!grabbing) return; if (e.currentTarget.hasPointerCapture(e.pointerId)) { e.currentTarget.releasePointerCapture(e.pointerId); } setGrabbing(false); } function onKeyDown(e: React.KeyboardEvent) { if (disabled) return; const big = step * 10; let next: number | null = null; switch (e.key) { case "ArrowRight": case "ArrowUp": next = clamped + step; break; case "ArrowLeft": case "ArrowDown": next = clamped - step; break; case "PageUp": next = clamped + big; break; case "PageDown": next = clamped - big; break; case "Home": next = min; break; case "End": next = max; break; default: return; } e.preventDefault(); onChange?.(Math.min(max, Math.max(min, next))); } return (

!disabled && onInteractChange?.(true)} onPointerLeave={(e) => { endGrab(e); if (!disabled) onInteractChange?.(false); }} onKeyDown={onKeyDown} onFocus={() => !disabled && onInteractChange?.(true)} onBlur={() => !disabled && onInteractChange?.(false)} className={cn( "relative flex h-6 w-full touch-none select-none items-center outline-none", "focus-visible:[&_[data-thumb]]:ring-2 focus-visible:[&_[data-thumb]]:ring-brand/70", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className )} > {/* rail */}

{/* filled portion */}

{/* thumb + tooltip, anchored at the filled edge */}

{/* tooltip */}

{format(clamped)}

{/* thumb */}

); } /* ---------------------------------------------------------------- */ function groupThousands(n: number): string { return Math.round(n) .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ","); } function tierFor(v: number): string { if (v < 100) return "Starter"; if (v < 300) return "Growth"; return "Scale"; } export default function Demo() { const [value, setValueState] = useState(280); const valueRef = useRef(280); const [interacting, setInteracting] = useState(false); const setValue = useCallback((v: number) => { valueRef.current = v; setValueState(v); }, []); // Idle: ease the thumb between a few price points on a gentle loop. useEffect(() => { if (interacting) return; const waypoints = [160, 360, 220, 420, 120]; let idx = 0; let stopped = false; let controls: AnimationPlaybackControls | undefined; const run = () => { if (stopped) return; const target = waypoints[idx % waypoints.length]; idx += 1; controls = animate(valueRef.current, target, { duration: 2.4, ease: [0.16, 1, 0.3, 1], onUpdate: (v) => setValue(Math.round(v / 5) * 5), onComplete: run, }); }; const t = setTimeout(run, 600); return () => { stopped = true; clearTimeout(t); controls?.stop(); }; }, [interacting, setValue]); const tier = tierFor(value); return (

{/* header */}

Monthly budget

Set your plan spend

{tier}

{/* headline value */}

${groupThousands(value)} / month

{/* slider */}

`$${groupThousands(v)}`} label="Monthly budget" />

$20 $500

{/* derived value */}

Included credits

{groupThousands(value * 40)}

); }

Range Slider

Monthly budget