{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "type": "registry:ui",
  "title": "Slider",
  "description": "A minimal range slider with a sky fill, soft halo thumb and a live value readout.",
  "files": [
    {
      "path": "registry/ui/slider.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nexport interface SliderProps {\n  label?: string;\n  min?: number;\n  max?: number;\n  step?: number;\n  defaultValue?: number;\n  format?: (value: number) => string;\n  onValueChange?: (value: number) => void;\n  className?: string;\n}\n\nexport function Slider({\n  label,\n  min = 0,\n  max = 100,\n  step = 1,\n  defaultValue = 50,\n  format = (v) => String(v),\n  onValueChange,\n  className = \"\",\n}: SliderProps) {\n  const [value, setValue] = React.useState(defaultValue);\n  const pct = ((value - min) / (max - min)) * 100;\n\n  return (\n    <div className={[\"w-full\", className].join(\" \")}>\n      {label && (\n        <div className=\"mb-3.5 flex justify-between text-[13px] text-zinc-400\">\n          <span>{label}</span>\n          <span className=\"font-mono text-zinc-100\">{format(value)}</span>\n        </div>\n      )}\n      <input\n        type=\"range\"\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        aria-label={label}\n        onChange={(e) => {\n          const next = Number(e.target.value);\n          setValue(next);\n          onValueChange?.(next);\n        }}\n        style={{ background: \"linear-gradient(90deg,#7dd3fc \" + pct + \"%,#1c1e22 \" + pct + \"%)\" }}\n        className={[\n          \"h-1 w-full cursor-pointer appearance-none rounded-full outline-none\",\n          \"[&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full\",\n          \"[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-[0_0_0_4px_rgba(125,211,252,.25)]\",\n          \"[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-white\",\n        ].join(\" \")}\n      />\n    </div>\n  );\n}\n"
    }
  ]
}