{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"slider","title":"Slider","description":"A draggable control for selecting a numeric value or range within fixed bounds.","dependencies":["cn","@base-ui/react"],"files":[{"path":"components/ui/slider.tsx","content":"import { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\nimport { cn } from \"cn\"\n\nfunction Slider({\n  className,\n  children,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props) {\n  const current = value ?? defaultValue\n  const thumbs = Array.isArray(current) ? current.length : 1\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\n        \"flex flex-col gap-2 data-horizontal:w-full data-vertical:h-full\",\n        className\n      )}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment=\"edge\"\n      {...props}\n    >\n      {children}\n      <SliderPrimitive.Control\n        data-slot=\"slider-control\"\n        className=\"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\"\n      >\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className=\"relative grow overflow-hidden rounded-2xl bg-fill-2 select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1\"\n        >\n          <SliderPrimitive.Indicator\n            data-slot=\"slider-range\"\n            className=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: thumbs }, (_, index) => (\n          <SliderPrimitive.Thumb\n            data-slot=\"slider-thumb\"\n            key={index}\n            className=\"block size-4 shrink-0 rounded-2xl bg-white shadow-md ring-1 ring-black/10 transition-[color,box-shadow] duration-200 select-none not-dark:bg-clip-padding hover:ring-4 hover:ring-ring/30 has-focus-visible:ring-4 has-focus-visible:ring-ring/30\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  )\n}\n\nfunction SliderLabel({ className, ...props }: SliderPrimitive.Label.Props) {\n  return (\n    <SliderPrimitive.Label\n      data-slot=\"slider-label\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SliderValue({ className, ...props }: SliderPrimitive.Value.Props) {\n  return (\n    <SliderPrimitive.Value\n      data-slot=\"slider-value\"\n      className={cn(\"text-sm text-muted-foreground tabular-nums\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Slider, SliderLabel, SliderValue }\n","type":"registry:ui"}],"cssVars":{"theme":{"color-fill-2":"var(--fill-2)","text-sm--letter-spacing":"-0.005em"},"light":{"fill-2":"oklch(0.556 0 0 / 8%)"},"dark":{"fill-2":"oklch(1 0 0 / 10%)"}},"categories":["forms"],"type":"registry:ui"}