{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "title": "Slider",
  "description": "Range slider on radix-ui with 4 tones (neutral, brand, success, danger) coloring the range and thumb, and 3 sizes (sm, md, lg) for the track and thumb. Supports single and multi-thumb, horizontal and vertical.",
  "dependencies": [
    "class-variance-authority@^0.7.1",
    "radix-ui@^1.6.1"
  ],
  "registryDependencies": [
    "@ai2/tokens",
    "@ai2/primitives"
  ],
  "files": [
    {
      "path": "registry/ai2/ui/slider.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@/registry/ai2/ui/primitives\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst sliderTrackVariants = cva(\n  \"relative grow overflow-hidden rounded-full bg-surface-3 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full\",\n  {\n    variants: {\n      size: {\n        sm: \"data-[orientation=horizontal]:h-1 data-[orientation=vertical]:w-1\",\n        md: \"data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5\",\n        lg: \"data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  }\n)\n\nconst sliderRangeVariants = cva(\n  \"absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\",\n  {\n    variants: {\n      tone: {\n        neutral: \"bg-primary\",\n        brand: \"bg-brand\",\n        success: \"bg-success\",\n        danger: \"bg-danger\",\n      },\n    },\n    defaultVariants: { tone: \"neutral\" },\n  }\n)\n\nconst sliderThumbVariants = cva(\n  \"relative block shrink-0 rounded-full border bg-background shadow-sm ring-ring/50 transition-[color,box-shadow] duration-(--motion-fast) after:absolute after:-inset-1.5 hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n  {\n    variants: {\n      size: {\n        sm: \"size-3.5\",\n        md: \"size-4\",\n        lg: \"size-5\",\n      },\n      tone: {\n        neutral: \"border-primary\",\n        brand: \"border-brand\",\n        success: \"border-success\",\n        danger: \"border-danger\",\n      },\n    },\n    defaultVariants: { size: \"md\", tone: \"neutral\" },\n  }\n)\n\ninterface SliderProps\n  extends React.ComponentProps<typeof SliderPrimitive.Root>,\n    VariantProps<typeof sliderThumbVariants> {}\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  size,\n  tone,\n  ...props\n}: SliderProps) {\n  const values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      data-tone={tone ?? \"neutral\"}\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(sliderTrackVariants({ size }))}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className={cn(sliderRangeVariants({ tone }))}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className={cn(sliderThumbVariants({ size, tone }))}\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport {\n  Slider,\n  sliderTrackVariants,\n  sliderRangeVariants,\n  sliderThumbVariants,\n  type SliderProps,\n}\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Pass value/defaultValue as an array; the number of thumbs follows its length. tone conveys intent (brand for primary controls, danger for destructive ranges).",
  "categories": [
    "form"
  ],
  "type": "registry:ui"
}