Slider

1import { cn } from "@/lib/utils";
2import { Slider as BaseSlider } from "@base-ui/react";
3import React from "react";
4import chroma from "chroma-js";
5 
6function Slider({ className, value, defaultValue, min, max, ...props }: BaseSlider.Root.Props) {
7  const _values = React.useMemo(
8    () =>
9      Array.isArray(value)
10        ? value
11        : typeof value === "number"
12          ? [value]
13          : Array.isArray(defaultValue)
14            ? defaultValue
15            : typeof defaultValue === "number"
16              ? [defaultValue]
17              : [min ?? 0],
18    [value, defaultValue, min],
19  );
20 
21  return (
22    <BaseSlider.Root
23      defaultValue={defaultValue}
24      value={value}
25      min={min}
26      max={max}
27      thumbAlignment="edge"
28      {...props}
29    >
30      <BaseSlider.Control
31        className={cn(
32          "flex w-32 touch-none items-center rounded-full bg-grey-100 inset-ring inset-ring-grey-200 select-none dark:bg-grey-700 dark:inset-ring-grey-600",
33          className,
34        )}
35      >
36        <BaseSlider.Track className={cn("h-4 w-full select-none")}>
37          <BaseSlider.Indicator
38            className={cn("bg-blue-500 select-none", _values.length === 1 ? "rounded-l-full" : "")}
39          />
40          {Array.from({ length: _values.length }).map((_, index) => (
41            <BaseSlider.Thumb
42              key={index}
43              className={cn(
44                "size-4 rounded-full bg-white-1000 shadow-100 select-none before:hidden",
45              )}
46            >
47              <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full border border-black-100 bg-blue-500" />
48            </BaseSlider.Thumb>
49          ))}
50        </BaseSlider.Track>
51      </BaseSlider.Control>
52    </BaseSlider.Root>
53  );
54}
55 
56interface ColorRangeSliderProps extends Omit<
57  BaseSlider.Root.Props,
58  "value" | "defaultValue" | "min" | "max" | "onValueChange" | "children"
59> {
60  value?: number;
61  defaultValue?: number;
62  min?: number;
63  max?: number;
64  step?: number;
65  onValueChange?: (value: number, event: Event, activeThumbIndex: number) => void;
66}
67 
68function ColorRangeSlider({
69  className,
70  value,
71  defaultValue = 0,
72  min = 0,
73  max = 360,
74  step = 1,
75  onValueChange,
76  ...props
77}: ColorRangeSliderProps) {
78  const isControlled = value !== undefined;
79  const [internalValue, setInternalValue] = React.useState<number>(defaultValue ?? 0);
80 
81  React.useEffect(() => {
82    if (!isControlled && defaultValue !== undefined) {
83// … truncated