Slider

1"use client";
2 
3import { type ReactNode, useEffect, useRef, useState } from "react";
4import { Slider as SliderPrimitive } from "@base-ui/react/slider";
5import {
6  AnimatePresence,
7  animate,
8  motion,
9  useMotionValue,
10  useReducedMotion,
11  useTransform,
12  type MotionValue,
13} from "motion/react";
14 
15import { cn } from "@/lib/utils";
16import { spring } from "@/lib/springs";
17 
18export type SliderValue = number | readonly number[];
19 
20function defaultFormatValue(value: number) {
21  return Number.isInteger(value) ? String(value) : value.toFixed(1);
22}
23 
24function percentOf(value: number, min: number, max: number) {
25  return max === min ? 0 : ((value - min) / (max - min)) * 100;
26}
27 
28interface SliderProps extends Omit<SliderPrimitive.Root.Props, "children" | "orientation"> {
29  className?: string;
30  trackClassName?: string;
31  thumbClassName?: string;
32  label?: ReactNode;
33  thumbLabels?: string[];
34  formatValue?: (value: number) => string;
35}
36 
37function Slider({
38  className,
39  trackClassName,
40  thumbClassName,
41  label,
42  thumbLabels,
43  formatValue = defaultFormatValue,
44  value: valueProp,
45  defaultValue,
46  onValueChange,
47  onValueCommitted,
48  min = 0,
49  max = 100,
50  step = 1,
51  disabled = false,
52  ...props
53}: SliderProps) {
54  const [uncontrolledValue, setUncontrolledValue] = useState<SliderValue>(
55    () => defaultValue ?? min,
56  );
57  const value = valueProp ?? uncontrolledValue;
58  const values: readonly number[] = Array.isArray(value) ? value : [value as number];
59  const [dragging, setDragging] = useState(false);
60  const [activeIndex, setActiveIndex] = useState(-1);
61 
62  const motion0 = useMotionValue(percentOf(values[0] ?? min, min, max));
63  const motion1 = useMotionValue(percentOf(values[1] ?? values[0] ?? min, min, max));
64  const motionValues = [motion0, motion1] as const;
65  const hasMountedRef = useRef(false);
66  const reduceMotion = useReducedMotion();
67 
68  useEffect(() => {
69    hasMountedRef.current = true;
70  }, []);
71 
72  useEffect(() => {
73    const controls = values.map((rawValue, index) => {
74      const mv = motionValues[index];
75      if (!mv) return undefined;
76      const percent = percentOf(rawValue, min, max);
77      if (!hasMountedRef.current || dragging || reduceMotion) {
78        mv.set(percent);
79        return undefined;
80      }
81      return animate(mv, percent, spring.moderate.enter);
82    });
83    return () => controls.forEach((control) => control?.stop());
84    // motionValues are stable refs; re-run only when the actual values/range change.
85// … truncated