slider

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