Slider

1"use client";
2 
3import { Slider as SliderPrimitive } from "@base-ui/react/slider";
4import { createChangeEventDetails } from "@base-ui/react/internals/createBaseUIEventDetails";
5import * as React from "react";
6import { cn } from "@/lib/utils";
7import { coarseTarget } from "@/lib/recipes";
8import { Input } from "@/components/ui/input";
9 
10export interface SliderProps extends SliderPrimitive.Root.Props {
11  /** Show a small numeric Input to the left, wired to values[0]. Range mode only. */
12  showStartInput?: boolean;
13  /** Show a small numeric Input to the right, wired to values[1]. Range mode only. */
14  showEndInput?: boolean;
15  /** Accessible name for one thumb, or one name per range thumb. */
16  ariaLabel?: string | string[];
17}
18 
19export function Slider({
20  className,
21  children,
22  defaultValue,
23  value,
24  min = 0,
25  max = 100,
26  step = 1,
27  disabled,
28  showStartInput,
29  showEndInput,
30  ariaLabel,
31  onValueChange,
32  ...props
33}: SliderProps): React.ReactElement {
34  const arrayFrom = React.useCallback((v: number | readonly number[] | undefined): number[] => {
35    if (v === undefined) return [min];
36    return Array.isArray(v) ? [...v] : [v as number];
37  }, [min]);
38 
39  const [uncontrolled, setUncontrolled] = React.useState<number[]>(() =>
40    arrayFrom(defaultValue),
41  );
42  const isControlled = value !== undefined;
43  const values = isControlled ? arrayFrom(value) : uncontrolled;
44  const isRange = values.length >= 2;
45  const showAnyInput = isRange && (showStartInput || showEndInput);
46  const resolvedValue = isRange ? values : values[0];
47 
48  const handleValueChange = React.useCallback(
49    (
50      nextValue: number | readonly number[],
51      details: SliderPrimitive.Root.ChangeEventDetails,
52    ) => {
53      onValueChange?.(nextValue, details);
54      if (!isControlled && !details.isCanceled) {
55        setUncontrolled(arrayFrom(nextValue));
56      }
57    },
58    [arrayFrom, isControlled, onValueChange],
59  );
60 
61  const updateAt = React.useCallback(
62    (
63      index: number,
64      next: number,
65      event: React.ChangeEvent<HTMLInputElement>,
66    ) => {
67      const clamped = Math.max(min, Math.min(max, next));
68      const nextValues = values.slice();
69      nextValues[index] = clamped;
70      if (isRange) {
71        if (index === 0 && nextValues[0] > nextValues[1]) nextValues[0] = nextValues[1];
72        if (index === 1 && nextValues[1] < nextValues[0]) nextValues[1] = nextValues[0];
73      }
74      handleValueChange(
75        isRange ? nextValues : nextValues[0],
76// … truncated