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  ...props
12}: SliderPrimitive.Root.Props) {
13  const _values = Array.isArray(value)
14    ? value
15    : Array.isArray(defaultValue)
16      ? defaultValue
17      : [min, max]
18 
19  return (
20    <SliderPrimitive.Root
21      className={cn("data-horizontal:w-full data-vertical:h-full", className)}
22      data-slot="slider"
23      defaultValue={defaultValue}
24      value={value}
25      min={min}
26      max={max}
27      thumbAlignment="edge"
28      {...props}
29    >
30      <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">
31        <SliderPrimitive.Track
32          data-slot="slider-track"
33          className="relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5"
34        >
35          <SliderPrimitive.Indicator
36            data-slot="slider-range"
37            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
38          />
39        </SliderPrimitive.Track>
40        {Array.from({ length: _values.length }, (_, index) => (
41          <SliderPrimitive.Thumb
42            data-slot="slider-thumb"
43            key={index}
44            className="block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
45          />
46        ))}
47      </SliderPrimitive.Control>
48    </SliderPrimitive.Root>
49  )
50}
51 
52export { Slider }