Glass Slider

1"use client";
2 
3import { Glass, useGlassDark } from "@/components/ui/glass";
4import {
5  glassEase,
6  MotionValue,
7  PRESS_DURATION,
8  prefersReducedMotion,
9  rubberBand,
10  SpringDriver,
11  TRAVEL_DURATION,
12  tween,
13} from "@/components/ui/glass-motion";
14import { cn } from "@/lib/utils";
15import { useCallback, useEffect, useRef, useState } from "react";
16 
17const TRACK_W = 240;
18const TRACK_H = 6;
19const THUMB_H = 22;
20const THUMB_W = Math.round(2 * THUMB_H);
21const TRAVEL = TRACK_W - THUMB_W;
22const LENS_HALF_W = THUMB_W / 2;
23const LENS_HALF_H = THUMB_H / 2;
24const LENS_R = THUMB_H / 2;
25const FAT_H = Math.round(0.75 * THUMB_H);
26const RUBBER_OVERSHOOT = TRACK_W * 0.05;
27const RUBBER_DAMPENING = 30;
28const BLEED =
29  Math.ceil(0.5 * Math.max(LENS_HALF_W, LENS_HALF_H) + RUBBER_OVERSHOOT) + 2;
30const PRESS_GROW = 1.5;
31const TINT_BLUR = 4;
32const REST_TINT = 1;
33const DEFORM_STIFFNESS = 180;
34const DEFORM_DAMPING = 14;
35const DEFORM_CAP = 0.35;
36const DEFORM_GAIN = 0.012;
37const DEFORM_EXP = 0.75;
38const HOLD_BOOST = 0.175;
39 
40const PRIMARY = "#0a84ff";
41const BG4_LIGHT = "#e1dfdf";
42const BG4_DARK = "#2a2828";
43const SHADOW_STRONG_LIGHT = "rgba(46, 15, 15, 0.12)";
44const SHADOW_STRONG_DARK = "rgba(0, 0, 0, 0.5)";
45 
46interface GlassSliderProps {
47  ariaLabel?: string;
48  className?: string;
49  defaultValue?: number;
50  disabled?: boolean;
51  max?: number;
52  min?: number;
53  onValueChange?: (value: number) => void;
54  step?: number;
55  value?: number;
56}
57 
58function GlassSlider({
59  value,
60  defaultValue = 50,
61  min = 0,
62  max = 100,
63  step = 1,
64  onValueChange,
65  disabled = false,
66  ariaLabel = "Value",
67  className,
68}: GlassSliderProps) {
69  const dark = useGlassDark();
70  const [internal, setInternal] = useState(defaultValue);
71  const current = value ?? internal;
72  const currentRef = useRef(current);
73  currentRef.current = current;
74 
75  const rootRef = useRef<HTMLDivElement | null>(null);
76  const markerRef = useRef<HTMLDivElement | null>(null);
77  const brightnessRef = useRef<HTMLDivElement | null>(null);
78  const tintRef = useRef<HTMLDivElement | null>(null);
79  const restShadowRef = useRef<HTMLDivElement | null>(null);
80  const pressShadowRef = useRef<HTMLDivElement | null>(null);
81  const fillRef = useRef<HTMLDivElement | null>(null);
82  const fatWrapRef = useRef<HTMLDivElement | null>(null);
83  const fatFillRef = useRef<HTMLDivElement | null>(null);
84  const inputRef = useRef<HTMLInputElement | null>(null);
85 
86  const span = Math.max(max - min, 1e-6);
87  const toX = useCallback(
88// … truncated