@arolariu/components/dist/components/ui/slider.js

🎨 70+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Range, Root, Thumb, Track } from "@radix-ui/react-slider";
import { forwardRef } from "react";
import { cn } from "../../lib/utilities.js";
const Slider = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsxs(Root, {
        ref: ref,
        className: cn("relative flex w-full touch-none items-center select-none", className),
        ...props,
        children: [
            /*#__PURE__*/ jsx(Track, {
                className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-neutral-900/20 dark:bg-neutral-50/20",
                children: /*#__PURE__*/ jsx(Range, {
                    className: "absolute h-full bg-neutral-900 dark:bg-neutral-50"
                })
            }),
            /*#__PURE__*/ jsx(Thumb, {
                className: "block h-4 w-4 rounded-full border border-neutral-200 border-neutral-900/50 bg-white shadow transition-colors focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-50/50 dark:border-neutral-800 dark:bg-neutral-950 dark:focus-visible:ring-neutral-300"
            })
        ]
    }));
Slider.displayName = Root.displayName;
export { Slider };

//# sourceMappingURL=slider.js.map