1
5import * as React from "react";
6import * as RadixSlider from "@radix-ui/react-slider";
7import { clsx } from "clsx";
8
9export const Slider = React.forwardRef<
10 React.ElementRef<typeof RadixSlider.Root>,
11 React.ComponentPropsWithoutRef<typeof RadixSlider.Root>
12>(({ className, ...props }, ref) => (
13 <RadixSlider.Root
14 ref={ref}
15 className={clsx(
16 "relative flex h-5 w-full touch-none select-none items-center",
17 "focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring",
18 className,
19 )}
20 {...props}
21 >
22 <RadixSlider.Track className="relative h-1.5 grow rounded-full bg-secondary">
23 <RadixSlider.Range className="absolute h-full rounded-full bg-primary" />
24 </RadixSlider.Track>
25 <RadixSlider.Thumb className="block h-4 w-4 rounded-full border border-input bg-card shadow-sm transition-transform focus:outline-none focus-visible:ring-2 focus-visible:ring-ring" />
26 </RadixSlider.Root>
27));
28Slider.displayName = "Slider";
29