Slider

1import { Slider as SliderPrimitive } from "@base-ui/react/slider"
2 
3import { cn } from "@/registry/lib/surface"
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      data-slot="slider"
22      defaultValue={defaultValue}
23      value={value}
24      min={min}
25      max={max}
26      thumbAlignment="edge"
27      className={cn("data-horizontal:w-full data-vertical:h-full", className)}
28      {...props}
29    >
30      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-40 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 data-horizontal:h-hairline data-horizontal:w-full data-vertical:h-full data-vertical:w-hairline"
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="relative block size-3 shrink-0 rounded-full border border-ring bg-background transition-opacity duration-[var(--d-drift)] ease-[var(--ease-drift)] select-none after:absolute after:-inset-2 hover:opacity-60 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-ring active:opacity-40 data-disabled:pointer-events-none data-disabled:opacity-40"
45          />
46        ))}
47      </SliderPrimitive.Control>
48    </SliderPrimitive.Root>
49  )
50}
51 
52export { Slider }