slider

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