slider

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