Slider

1"use client";
2 
3import { useMemo } from "react";
4import { Slider as SliderPrimitive } from "@base-ui/react/slider";
5 
6import { cn } from "@/lib/utils";
7 
8function Slider({
9  className,
10  defaultValue,
11  value,
12  min = 0,
13  max = 100,
14  "aria-label": ariaLabel,
15  ...props
16}: SliderPrimitive.Root.Props) {
17  const _values = useMemo(
18    () =>
19      Array.isArray(value)
20        ? value
21        : Array.isArray(defaultValue)
22          ? defaultValue
23          : [min, max],
24    [value, defaultValue, min, max]
25  );
26 
27  return (
28    <SliderPrimitive.Root
29      className={cn("data-horizontal:w-full data-vertical:h-full", className)}
30      data-slot="slider"
31      defaultValue={defaultValue}
32      value={value}
33      min={min}
34      max={max}
35      thumbAlignment="edge-client-only"
36      aria-label={ariaLabel}
37      {...props}
38    >
39      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
40        <SliderPrimitive.Track
41          data-slot="slider-track"
42          className="bg-border relative grow overflow-hidden rounded-full select-none data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5"
43        >
44          <SliderPrimitive.Indicator
45            data-slot="slider-range"
46            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
47          />
48        </SliderPrimitive.Track>
49        {Array.from({ length: _values.length }, (_, index) => (
50          <SliderPrimitive.Thumb
51            data-slot="slider-thumb"
52            key={index}
53            aria-label={ariaLabel}
54            className="border-primary ring-primary/30 relative block size-4 shrink-0 rounded-full border-2 bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
55          />
56        ))}
57      </SliderPrimitive.Control>
58    </SliderPrimitive.Root>
59  );
60}
61 
62export { Slider };