slider

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