Glass Slider

1"use client"
2 
3import * as React from "react"
4import * as SliderPrimitive from "@radix-ui/react-slider"
5import { cn } from "@/lib/utils"
6 
7const GlassSlider = React.forwardRef<
8  React.ElementRef<typeof SliderPrimitive.Root>,
9  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
10>(({ className, ...props }, ref) => (
11  <SliderPrimitive.Root
12    ref={ref}
13    className={cn("relative flex w-full touch-none select-none items-center", className)}
14    {...props}
15  >
16    <SliderPrimitive.Track
17      className={cn(
18        "relative h-2 w-full grow overflow-hidden rounded-full",
19        "bg-white/10 backdrop-blur-xl border border-white/20",
20      )}
21    >
22      <SliderPrimitive.Range
23        className={cn(
24          "absolute h-full rounded-full",
25          "bg-linear-to-r from-cyan-400 via-blue-400 to-purple-400",
26          "shadow-[0_0_8px_rgba(59,130,246,0.4)]",
27        )}
28      />
29    </SliderPrimitive.Track>
30    <SliderPrimitive.Thumb
31      className={cn(
32        "block h-5 w-5 rounded-full cursor-grab active:cursor-grabbing",
33        "bg-white border-2 border-white/50",
34        "shadow-[0_2px_10px_rgba(0,0,0,0.3)]",
35        "transition-all duration-200",
36        "hover:scale-110 hover:shadow-[0_0_16px_rgba(59,130,246,0.5)]",
37        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50",
38        "disabled:pointer-events-none disabled:opacity-50",
39      )}
40    />
41  </SliderPrimitive.Root>
42))
43GlassSlider.displayName = SliderPrimitive.Root.displayName
44 
45export { GlassSlider }