slider

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