{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "type": "registry:ui",
  "title": "Slider",
  "description": "Continuous or stepped range slider with styled track, tactile thumb, and value readout.",
  "registryDependencies": [
    "https://ui.arpitbhayani.me/r/aui.json"
  ],
  "files": [
    {
      "path": "ui/slider.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SliderProps {\n  value: number;\n  onChange: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  label?: string;\n  valueFormatter?: (value: number) => string;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport function Slider({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  label,\n  valueFormatter = (val) => String(val),\n  disabled = false,\n  className,\n}: SliderProps) {\n  const percentage = Math.max(0, Math.min(100, ((value - min) / (max - min)) * 100));\n\n  return (\n    <div className={cn(\"flex flex-col gap-2 w-full\", disabled && \"opacity-50 pointer-events-none\", className)}>\n      <div className=\"flex items-center justify-between text-xs font-medium\">\n        {label && <span className=\"text-foreground\">{label}</span>}\n        <span className=\"font-mono text-primary font-medium\">{valueFormatter(value)}</span>\n      </div>\n\n      <div className=\"relative flex items-center select-none touch-none w-full h-5\">\n        <input\n          type=\"range\"\n          min={min}\n          max={max}\n          step={step}\n          value={value}\n          disabled={disabled}\n          onChange={(e) => onChange(Number(e.target.value))}\n          className=\"w-full h-1.5 bg-muted rounded-full appearance-none cursor-pointer accent-primary\"\n        />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}