ElasticSlider

1/* oxlint-disable func-style, no-empty-function, no-shadow, no-use-before-define, react/react-compiler, max-lines-per-function, max-lines, no-magic-numbers -- vendored from chanhdai.com/r/elastic-slider.json (MIT, @iamncdai); kept diffable against upstream */
2import {
3  useCallback,
4  useEffect,
5  useLayoutEffect,
6  useRef,
7  useState,
8} from "react"
9import {
10  animate,
11  domAnimation,
12  LazyMotion,
13  m,
14  useMotionValue,
15  useReducedMotion,
16  useTransform,
17} from "motion/react"
18 
19// LazyMotion + `m` instead of `motion` to avoid shipping the full animation
20// graph (~30kb). (Neon UI patch on the vendored source.)
21 
22import { cn } from "@/lib/utils"
23import { useControllableState } from "@/hooks/use-controllable-state"
24 
25// Drag detection & rubber band
26const CLICK_THRESHOLD = 3
27const DEAD_ZONE = 32
28const MAX_CURSOR_RANGE = 200
29const MAX_STRETCH = 8
30 
31// Layout offsets used by the "handle dodges label/value" calculation.
32const HANDLE_BUFFER = 8
33const LABEL_OFFSET = 12 + 4
34const VALUE_OFFSET = 12 - 8
35 
36function clamp(v: number, lo: number, hi: number) {
37  return Math.max(lo, Math.min(hi, v))
38}
39 
40function decimalsForStep(step: number): number {
41  const s = step.toString()
42  const dot = s.indexOf(".")
43  return dot === -1 ? 0 : s.length - dot - 1
44}
45 
46function roundValue(val: number, step: number): number {
47  const raw = Math.round(val / step) * step
48  return parseFloat(raw.toFixed(decimalsForStep(step)))
49}
50 
51// Magnetic snap to the nearest decile when within 3.125% of it.
52function snapToDecile(rawValue: number, min: number, max: number): number {
53  const normalized = (rawValue - min) / (max - min)
54  const nearest = Math.round(normalized * 10) / 10
55  if (Math.abs(normalized - nearest) <= 0.03125) {
56    return min + nearest * (max - min)
57  }
58  return rawValue
59}
60 
61export type ElasticSliderProps = {
62  /** Label shown inside the track. */
63  label: string
64 
65  /** Controlled value. Use together with `onValueChange` */
66  value?: number
67  /** Initial value for uncontrolled mode. Falls back to `min` */
68  defaultValue?: number
69  /** Called with the new value on drag, click, or key press. */
70  onValueChange?: (value: number) => void
71 
72  /**
73   * Minimum value.
74   * @defaultValue 0 */
75  min?: number
76  /**
77   * Maximum value.
78   * @defaultValue 1 */
79  max?: number
80  /**
81   * Smallest increment.
82   * @defaultValue 0.01 */
83  step?: number
84  /** Format the displayed value. Defaults to `value.toFixed(...)` based on `step` */
85  formatValue?: (value: number) => string
86 
87  className?: string
88// … truncated