{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "dual-range-slider",
  "type": "registry:ui",
  "title": "Precision Dual Range Slider",
  "description": "Multi-handle min and max numerical range slider with gradient active span and dynamic floating value tooltips.",
  "category": "forms",
  "dependencies": [],
  "files": [
    {
      "path": "registry/forms/dual-range-slider/dual-range-slider.tsx",
      "type": "registry:ui",
      "target": "components/ui/dual-range-slider.tsx",
      "content": "import React, { useState } from 'react';\n\nexport const DualRangeSlider: React.FC = () => {\n  const [minVal, setMinVal] = useState(24);\n  const [maxVal, setMaxVal] = useState(82);\n\n  return (\n    <div className=\"w-full max-w-sm mx-auto p-4 rounded-2xl border border-zinc-200 dark:border-white/10 bg-white/90 dark:bg-zinc-900/90 shadow-lg backdrop-blur-md font-mono text-xs\">\n      <div className=\"flex justify-between items-center mb-4\">\n        <span className=\"text-zinc-500 uppercase tracking-wider text-[11px]\">Latency Threshold</span>\n        <span className=\"font-bold text-indigo-500\">{minVal}ms – {maxVal}ms</span>\n      </div>\n\n      <div className=\"relative w-full h-8 flex items-center\">\n        {/* Track Base */}\n        <div className=\"absolute w-full h-2 rounded-full bg-zinc-200 dark:bg-zinc-800\" />\n\n        {/* Highlight Span */}\n        <div\n          className=\"absolute h-2 rounded-full bg-gradient-to-r from-indigo-500 to-cyan-400\"\n          style={{\n            left: `${minVal}%`,\n            width: `${Math.max(0, maxVal - minVal)}%`,\n          }}\n        />\n\n        {/* Dual Input Controls */}\n        <input\n          type=\"range\"\n          min=\"0\"\n          max=\"100\"\n          value={minVal}\n          onChange={(e) => setMinVal(Math.min(Number(e.target.value), maxVal - 5))}\n          className=\"absolute w-full appearance-none bg-transparent pointer-events-auto cursor-pointer accent-indigo-600\"\n        />\n        <input\n          type=\"range\"\n          min=\"0\"\n          max=\"100\"\n          value={maxVal}\n          onChange={(e) => setMaxVal(Math.max(Number(e.target.value), minVal + 5))}\n          className=\"absolute w-full appearance-none bg-transparent pointer-events-auto cursor-pointer accent-cyan-400\"\n        />\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}