{
  "name": "compare-slider-controlled-demo",
  "type": "registry:example",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "compare-slider",
    "button",
    "label",
    "slider"
  ],
  "files": [
    {
      "path": "examples/compare-slider-controlled-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  CompareSlider,\n  CompareSliderAfter,\n  CompareSliderBefore,\n  CompareSliderHandle,\n} from \"@/registry/bases/base/ui/compare-slider\";\n\nexport default function CompareSliderControlledDemo() {\n  const [value, setValue] = React.useState(30);\n\n  return (\n    <CompareSlider\n      value={value}\n      onValueChange={setValue}\n      className=\"h-[400px] overflow-hidden rounded-lg border\"\n    >\n      <CompareSliderBefore label=\"Original\">\n        {/* biome-ignore lint/performance/noImgElement: Demo image for comparison slider */}\n        <img\n          src=\"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&h=1080&fit=crop&auto=format&fm=webp&q=80\"\n          alt=\"Original\"\n          className=\"size-full object-cover\"\n        />\n      </CompareSliderBefore>\n      <CompareSliderAfter label=\"Enhanced\">\n        {/* biome-ignore lint/performance/noImgElement: Demo image for comparison slider */}\n        <img\n          src=\"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&h=1080&fit=crop&auto=format&fm=webp&q=80&sat=50\"\n          alt=\"Enhanced\"\n          className=\"size-full object-cover\"\n        />\n      </CompareSliderAfter>\n      <CompareSliderHandle />\n    </CompareSlider>\n  );\n}\n",
      "target": ""
    }
  ]
}