Elastic Slider

1"use client"
2 
3import {
4  useCallback,
5  useEffect,
6  useLayoutEffect,
7  useRef,
8  useState,
9} from "react"
10import {
11  animate,
12  motion,
13  useMotionValue,
14  useReducedMotion,
15  useTransform,
16} from "motion/react"
17 
18import { cn } from "@/lib/utils"
19import { useControllableState } from "@/registry/hooks/use-controllable-state"
20 
21// Drag detection & rubber band
22const CLICK_THRESHOLD = 3
23const DEAD_ZONE = 32
24const MAX_CURSOR_RANGE = 200
25const MAX_STRETCH = 8
26 
27// Layout offsets used by the "handle dodges label/value" calculation.
28const HANDLE_BUFFER = 8
29const LABEL_OFFSET = 12 + 4
30const VALUE_OFFSET = 12 - 8
31 
32function clamp(v: number, lo: number, hi: number) {
33  return Math.max(lo, Math.min(hi, v))
34}
35 
36function decimalsForStep(step: number): number {
37  const s = step.toString()
38  const dot = s.indexOf(".")
39  return dot === -1 ? 0 : s.length - dot - 1
40}
41 
42function roundValue(val: number, step: number): number {
43  const raw = Math.round(val / step) * step
44  return parseFloat(raw.toFixed(decimalsForStep(step)))
45}
46 
47// Magnetic snap to the nearest decile when within 3.125% of it.
48function snapToDecile(rawValue: number, min: number, max: number): number {
49  const normalized = (rawValue - min) / (max - min)
50  const nearest = Math.round(normalized * 10) / 10
51  if (Math.abs(normalized - nearest) <= 0.03125) {
52    return min + nearest * (max - min)
53  }
54  return rawValue
55}
56 
57export type ElasticSliderProps = {
58  /** Label shown inside the track. */
59  label: string
60 
61  /** Controlled value. Use together with `onValueChange` */
62  value?: number
63  /** Initial value for uncontrolled mode. Falls back to `min` */
64  defaultValue?: number
65  /** Called with the new value on drag, click, or key press. */
66  onValueChange?: (value: number) => void
67 
68  /**
69   * Minimum value.
70   * @defaultValue 0 */
71  min?: number
72  /**
73   * Maximum value.
74   * @defaultValue 1 */
75  max?: number
76  /**
77   * Smallest increment.
78   * @defaultValue 0.01 */
79  step?: number
80  /** Format the displayed value. Defaults to `value.toFixed(...)` based on `step` */
81  formatValue?: (value: number) => string
82 
83  className?: string
84  /** Accessible name. Falls back to `label` */
85  "aria-label"?: string
86}
87 
88export function ElasticSlider({
89  label,
90 
91  value: valueProp,
92  defaultValue,
93  onValueChange,
94 
95  min = 0,
96  max = 1,
97  step = 0.01,
98  formatValue,
99 
100  className,
101  "aria-label": ariaLabel,
102}: ElasticSliderProps) {
103  const [value = min, setValue] = useControllableState({
104    prop: valueProp,
105// … truncated