slider

1"use client"
2
3import * as React from "react"
4import { Slider as BaseSlider } from "@base-ui/react/slider"
5import { cn } from "@/lib/utils"
6
7type SliderRootProps = React.ComponentPropsWithoutRef<typeof BaseSlider.Root>
8
9type SliderA11yProps =
10    | { "aria-label": string; "aria-labelledby"?: string; id?: string }
11    | { "aria-labelledby": string; "aria-label"?: string; id?: string }
12    | { id: string; "aria-label"?: string; "aria-labelledby"?: string }
13
14type SliderProps = Omit<SliderRootProps, "aria-label" | "aria-labelledby" | "id"> & SliderA11yProps
15
16const Slider = React.forwardRef<
17    React.ComponentRef<typeof BaseSlider.Root>,
18    SliderProps
19>(({ className, ...props }, ref) => (
20    <BaseSlider.Root
21        ref={ref}
22        className={cn(
23            "relative flex w-full touch-none select-none items-center",
24            className
25        )}
26        {...props}
27    >
28        <BaseSlider.Control className="flex w-full touch-none items-center select-none">
29            <BaseSlider.Track className="relative h-3 w-full grow overflow-hidden rounded-base border-2 border-black bg-white">
30                <BaseSlider.Indicator className="h-full rounded-s-base bg-main" />
31            </BaseSlider.Track>
32            <BaseSlider.Thumb className="block h-6 w-6 rounded-full border-2 border-black bg-main focus-brutal disabled:pointer-events-none disabled:opacity-50" />
33        </BaseSlider.Control>
34    </BaseSlider.Root>
35))
36Slider.displayName = "Slider"
37
38export { Slider }