Slider

1"use client";
2 
3import {
4  forwardRef,
5  useRef,
6  useState,
7  useEffect,
8  useLayoutEffect,
9  useCallback,
10  useMemo,
11  type CSSProperties,
12  type HTMLAttributes,
13} from "react";
14import {
15  motion,
16  useMotionValue,
17  useTransform,
18  animate,
19  AnimatePresence,
20  type MotionValue,
21} from "framer-motion";
22import * as SliderPrimitive from "@radix-ui/react-slider";
23import { cn } from "@/lib/utils";
24import { spring } from "@/lib/springs";
25import { fontWeights } from "@/lib/font-weight";
26import { useShape } from "@/lib/shape-context";
27 
28// ---------------------------------------------------------------------------
29// Types
30// ---------------------------------------------------------------------------
31 
32type SliderValue = number | [number, number];
33type ValuePosition = "left" | "right" | "top" | "bottom" | "tooltip";
34 
35interface SliderProps
36  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
37  value: SliderValue;
38  onChange: (value: SliderValue) => void;
39  min?: number;
40  max?: number;
41  step?: number;
42  /**
43   * Discrete list of allowed values, e.g. [0.1, 0.5, 0.7, 1.1, 1.3].
44   *
45   * When set, the thumb snaps only to these values (positioned proportionally
46   * along the track) and arrow keys walk the list. `min`/`max` derive from the
47   * list's extremes and `step` is ignored.
48   */
49  steps?: number[];
50  showSteps?: boolean;
51  showValue?: boolean;
52  valuePosition?: ValuePosition;
53  formatValue?: (v: number) => string;
54  label?: string;
55  disabled?: boolean;
56  trackClassName?: string;
57  trackStyle?: CSSProperties;
58  fillClassName?: string;
59  fillStyle?: CSSProperties;
60  hideFill?: boolean;
61  thumbColor?: string;
62  thumbBorderColor?: string;
63}
64 
65// ---------------------------------------------------------------------------
66// Constants
67// ---------------------------------------------------------------------------
68 
69const THUMB_SIZE = 20;
70const THUMB_SIZE_REST = 16;
71const TRACK_BG_HEIGHT = 18;
72const DOT_SIZE = 4;
73const PIP_SIZE = 5;
74// Inset track BG so its rounded-end centers align with thumb centers at min/max
75const TRACK_INSET = (THUMB_SIZE - TRACK_BG_HEIGHT) / 2;
76 
77// ---------------------------------------------------------------------------
78// Helpers
79// ---------------------------------------------------------------------------
80 
81function valueToPixel(
82  v: number,
83  min: number,
84  max: number,
85  trackWidth: number
86): number {
87  if (max === min) return 0;
88  const usable = trackWidth - THUMB_SIZE;
89// … truncated