@kit-data-manager/react-search-component
Version:
All-in-one component for rendering an elastic search UI for searching anything. Built-in support for visualizing related items in a graph and resolving unique identifiers.
8 lines • 1.9 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import * as SliderPrimitive from "@radix-ui/react-slider";
import { cn } from "../../lib/utils";
const Slider = React.forwardRef(({ className, ...props }, ref) => (_jsxs(SliderPrimitive.Root, { ref: ref, className: cn("rfs:relative rfs:flex rfs:w-full rfs:touch-none rfs:select-none rfs:items-center", className), ...props, children: [_jsx(SliderPrimitive.Track, { className: "rfs:relative rfs:h-2 rfs:w-full rfs:grow rfs:overflow-hidden rfs:rounded-full rfs:bg-secondary", children: _jsx(SliderPrimitive.Range, { className: "rfs:absolute rfs:h-full rfs:bg-primary" }) }), _jsx(SliderPrimitive.Thumb, { className: "rfs:block rfs:h-5 rfs:w-5 rfs:rounded-full rfs:border-2 rfs:border-primary rfs:bg-background rfs:ring-offset-background rfs:transition-colors rfs:focus-visible:outline-hidden rfs:focus-visible:ring-2 rfs:focus-visible:ring-ring rfs:focus-visible:ring-offset-2 rfs:disabled:pointer-events-none rfs:disabled:opacity-50", children: _jsx("span", { className: " rfs:pointer-events-none rfs:text-muted-foreground rfs:text-sm rfs:-top-5 rfs:-translate-x-1/2 rfs:left-1/2 rfs:absolute", children: props.value?.[0] }) }), _jsx(SliderPrimitive.Thumb, { className: "rfs:block rfs:h-5 rfs:w-5 rfs:rounded-full rfs:border-2 rfs:border-primary rfs:bg-background rfs:ring-offset-background rfs:transition-colors rfs:focus-visible:outline-hidden rfs:focus-visible:ring-2 rfs:focus-visible:ring-ring rfs:focus-visible:ring-offset-2 rfs:disabled:pointer-events-none rfs:disabled:opacity-50", children: _jsx("span", { className: "rfs:pointer-events-none rfs:text-muted-foreground rfs:text-sm rfs:-bottom-5 rfs:-translate-x-1/2 rfs:left-1/2 rfs:absolute", children: props.value?.[1] }) })] })));
Slider.displayName = SliderPrimitive.Root.displayName;
export { Slider };
//# sourceMappingURL=slider.js.map