Slider

1"use client"
2 
3import * as React from "react"
4import * as SliderPrimitive from "@radix-ui/react-slider"
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    if (Array.isArray(value)) return value
18    if (Array.isArray(defaultValue)) return defaultValue
19    return [min]
20  }, [value, defaultValue, min])
21 
22  return (
23    <SliderPrimitive.Root
24      data-slot="slider"
25      defaultValue={defaultValue}
26      value={value}
27      min={min}
28      max={max}
29      className={cn(
30        "relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50",
31        className
32      )}
33      {...props}
34    >
35      <SliderPrimitive.Track
36        data-slot="slider-track"
37        className="relative h-2 w-full grow overflow-hidden rounded-full bg-[#d7dbe2] shadow-[inset_0_1px_3px_rgba(0,0,0,0.25)]"
38      >
39        <SliderPrimitive.Range
40          data-slot="slider-range"
41          className="absolute h-full bg-[linear-gradient(180deg,var(--aqua-gel-hi,#a5d0fa)_0%,var(--aqua-gel-mid,#4a95ef)_50%,var(--aqua-accent,#2f7de0)_55%,var(--aqua-gel-light,#6fb4f7)_100%)] shadow-[inset_0_1px_1px_rgba(255,255,255,0.7)]"
42        />
43      </SliderPrimitive.Track>
44      {values.map((_, i) => (
45        <SliderPrimitive.Thumb
46          key={i}
47          data-slot="slider-thumb"
48          className="block size-[18px] rounded-full border border-[#8b909a] bg-[radial-gradient(circle_at_50%_30%,#ffffff,#d5d9df_70%,#c3c8cf_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.9),0_1px_3px_rgba(20,30,50,0.35)] outline-none transition-[filter] hover:brightness-103 focus-visible:ring-[3px] focus-visible:ring-[var(--aqua-ring,#6cb0f7)]/70 active:brightness-97"
49        />
50      ))}
51    </SliderPrimitive.Root>
52  )
53}
54 
55export { Slider }