{
  "name": "angle-slider-range-demo",
  "type": "registry:example",
  "registryDependencies": [
    "angle-slider"
  ],
  "files": [
    {
      "path": "examples/angle-slider-range-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  AngleSlider,\n  AngleSliderRange,\n  AngleSliderThumb,\n  AngleSliderTrack,\n  AngleSliderValue,\n} from \"@/registry/bases/base/ui/angle-slider\";\n\nexport default function AngleSliderRangeDemo() {\n  const [value, setValue] = React.useState([90, 270]);\n\n  return (\n    <div className=\"flex flex-col items-center gap-4\">\n      <AngleSlider\n        value={value}\n        onValueChange={setValue}\n        max={360}\n        min={0}\n        step={5}\n        size={80}\n        minStepsBetweenThumbs={2}\n      >\n        <AngleSliderTrack>\n          <AngleSliderRange />\n        </AngleSliderTrack>\n        <AngleSliderThumb index={0} />\n        <AngleSliderThumb index={1} />\n        <AngleSliderValue />\n      </AngleSlider>\n      <div className=\"flex flex-col gap-2 text-center text-sm\">\n        <p>\n          <strong>Range:</strong> {value[0]}° - {value[1]}°\n        </p>\n        <p>\n          <strong>Arc Length:</strong>{\" \"}\n          {Math.abs((value[1] ?? 0) - (value[0] ?? 0))}°\n        </p>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}