{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dual-range-slider-dependecies",
  "title": "Dual Range Slider Dependencies",
  "description": "component for the Dual Range Slider Dependencies",
  "dependencies": [
    "@radix-ui/react-slider"
  ],
  "files": [
    {
      "path": "app/registry/spectrumui/dual-range-slider-dependecies.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface DualRangeSliderProps\n  extends React.ComponentProps<typeof SliderPrimitive.Root> {\n  labelPosition?: \"top\" | \"bottom\";\n  label?: (value: number | undefined) => React.ReactNode;\n}\n\nconst DualRangeSlider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  DualRangeSliderProps\n>(({ className, label, labelPosition = \"top\", ...props }, ref) => {\n  const initialValue = Array.isArray(props.value)\n    ? props.value\n    : [props.min, props.max];\n\n  return (\n    <SliderPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"relative flex w-full touch-none select-none items-center\",\n        className,\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track className=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\n        <SliderPrimitive.Range className=\"absolute h-full bg-primary\" />\n      </SliderPrimitive.Track>\n      {initialValue.map((value, index) => (\n        <React.Fragment key={index}>\n          <SliderPrimitive.Thumb className=\"relative block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\">\n            {label && (\n              <span\n                className={cn(\n                  \"absolute flex w-full justify-center\",\n                  labelPosition === \"top\" && \"-top-7\",\n                  labelPosition === \"bottom\" && \"top-4\",\n                )}\n              >\n                {label(value)}\n              </span>\n            )}\n          </SliderPrimitive.Thumb>\n        </React.Fragment>\n      ))}\n    </SliderPrimitive.Root>\n  );\n});\nDualRangeSlider.displayName = \"DualRangeSlider\";\n\nexport { DualRangeSlider };\n",
      "type": "registry:component",
      "target": "components/spectrumui/dual-range-slider-dependecies.tsx"
    }
  ],
  "type": "registry:component"
}