{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-slider",
  "title": "Slider Demo",
  "description": "Three sliders showing volume, brightness and opacity controls with click-to-edit values.",
  "registryDependencies": [
    "@unlumen-ui/slider"
  ],
  "files": [
    {
      "path": "registry/demo/components/unlumen/slider/index.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Slider } from \"@/components/unlumen-ui/primitives/slider\";\n\nexport const SliderDemo = ({\n  showValue = true,\n  showSteps = false,\n  valuePosition = \"bottom\",\n}: {\n  showValue?: boolean;\n  showSteps?: boolean;\n  valuePosition?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"tooltip\";\n}) => {\n  const [volume, setVolume] = useState(40);\n  const [brightness, setBrightness] = useState(70);\n  const [opacity, setOpacity] = useState(55);\n\n  return (\n    <div className=\"flex flex-col gap-8 w-full max-w-sm px-4 py-8\">\n      <Slider\n        value={volume}\n        onChange={(v) => setVolume(v as number)}\n        min={0}\n        max={100}\n        step={1}\n        label=\"Volume\"\n        showValue={showValue}\n        showSteps={showSteps}\n        valuePosition={valuePosition}\n        formatValue={(v) => `${v}%`}\n      />\n      <Slider\n        value={brightness}\n        onChange={(v) => setBrightness(v as number)}\n        min={0}\n        max={100}\n        step={1}\n        label=\"Brightness\"\n        showValue={showValue}\n        showSteps={showSteps}\n        valuePosition={valuePosition}\n        formatValue={(v) => `${v}%`}\n      />\n      <Slider\n        value={opacity}\n        onChange={(v) => setOpacity(v as number)}\n        min={0}\n        max={100}\n        step={5}\n        label=\"Opacity\"\n        showValue={showValue}\n        showSteps={showSteps}\n        valuePosition={valuePosition}\n        formatValue={(v) => `${v}%`}\n      />\n    </div>\n  );\n};\n",
      "type": "registry:example"
    }
  ],
  "meta": {
    "demoProps": {
      "SliderDemo": {
        "showValue": {
          "value": true
        },
        "showSteps": {
          "value": false
        },
        "valuePosition": {
          "value": "bottom",
          "options": {
            "Top": "top",
            "Bottom": "bottom",
            "Left": "left",
            "Right": "right",
            "Tooltip": "tooltip"
          }
        }
      }
    }
  },
  "type": "registry:example"
}