{"ast":null,"code":"var _jsxFileName = \"/Users/laurynj/Desktop/\\u1112\\u1162\\u110B\\u1163\\u11BC\\u1100\\u1167\\u11BC\\u110E\\u1161\\u11AF\\u110B\\u1165\\u11B8 \\u1100\\u1169\\u11BC\\u1100\\u1169\\u11BC\\u1109\\u1161\\u110B\\u1165\\u11B8/@GIS_\\u1112\\u1161\\u11B7\\u110C\\u1165\\u11BC\\u110B\\u116D\\u11BC/GIS_\\u1112\\u1161\\u11B7\\u110C\\u1165\\u11BC\\u110B\\u116D\\u11BC_\\u1105\\u1175\\u110B\\u1162\\u11A8\\u1110\\u1173/dark/src/component/common/Slider.jsx\",\n  _s = $RefreshSig$();\nimport { useState } from \"react\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nfunction Slider({\n  label = \"\",\n  min = 0,\n  max = 100,\n  defaultValue = 50\n}) {\n  _s();\n  const [value, setValue] = useState(defaultValue);\n  const percent = (value - min) / (max - min) * 100;\n  return /*#__PURE__*/_jsxDEV(\"label\", {\n    className: \"rangeWrap\",\n    children: [/*#__PURE__*/_jsxDEV(\"span\", {\n      className: \"rangeLabel\",\n      children: label\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 10,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(\"input\", {\n      type: \"range\",\n      min: min,\n      max: max,\n      value: value,\n      onChange: e => setValue(Number(e.target.value)),\n      style: {\n        \"--percent\": `${percent}%`\n      },\n      \"aria-label\": label\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 11,\n      columnNumber: 7\n    }, this)]\n  }, void 0, true, {\n    fileName: _jsxFileName,\n    lineNumber: 9,\n    columnNumber: 5\n  }, this);\n}\n_s(Slider, \"+di++irDcPspjmhJVP9frUKGzpo=\");\n_c = Slider;\nexport default Slider;\n\n// import { useRef, useState, useEffect } from 'react';\n\n// export default function Slider({ value = 100, onChange }) {\n//   const barRef = useRef(null);\n//   const [percent, setPercent] = useState(value);\n\n//   const update = (x) => {\n//     const rect = barRef.current.getBoundingClientRect();\n//     let v = ((x - rect.left) / rect.width) * 100;\n//     v = Math.max(0, Math.min(100, v));\n//     setPercent(v);\n//     onChange?.(Math.round(v));\n//   };\n\n//   const onDown = (e) => {\n//     update(e.clientX);\n\n//     const move = (ev) => update(ev.clientX);\n//     const up = () => {\n//       document.removeEventListener('mousemove', move);\n//       document.removeEventListener('mouseup', up);\n//     };\n\n//     document.addEventListener('mousemove', move);\n//     document.addEventListener('mouseup', up);\n//   };\n\n//   useEffect(() => setPercent(value), [value]);\n\n//   return (\n//     <div className=\"sliderControl\">\n//       <div className=\"sliderBar\" ref={barRef} onMouseDown={onDown}>\n//         <div className=\"sliderBarFill\" style={{ width: `${percent}%` }} />\n//         <div className=\"sliderHandle\" style={{ left: `${percent}%` }} />\n//       </div>\n//     </div>\n//   );\n// }\nvar _c;\n$RefreshReg$(_c, \"Slider\");","map":{"version":3,"names":["useState","jsxDEV","_jsxDEV","Slider","label","min","max","defaultValue","_s","value","setValue","percent","className","children","fileName","_jsxFileName","lineNumber","columnNumber","type","onChange","e","Number","target","style","_c","$RefreshReg$"],"sources":["/Users/laurynj/Desktop/해양경찰업 공공사업/@GIS_함정용/GIS_함정용_리액트/dark/src/component/common/Slider.jsx"],"sourcesContent":["import { useState } from \"react\";\n\nfunction Slider({ label = \"\", min = 0, max = 100, defaultValue = 50 }) {\n  const [value, setValue] = useState(defaultValue);\n\n  const percent = ((value - min) / (max - min)) * 100;\n\n  return (\n    <label className=\"rangeWrap\">\n      <span className=\"rangeLabel\">{label}</span>\n      <input\n        type=\"range\"\n        min={min}\n        max={max}\n        value={value}\n        onChange={(e) => setValue(Number(e.target.value))}\n        style={{ \"--percent\": `${percent}%` }}\n        aria-label={label}\n      />\n    </label>\n  );\n}\n\nexport default Slider;\n\n\n// import { useRef, useState, useEffect } from 'react';\n\n// export default function Slider({ value = 100, onChange }) {\n//   const barRef = useRef(null);\n//   const [percent, setPercent] = useState(value);\n\n//   const update = (x) => {\n//     const rect = barRef.current.getBoundingClientRect();\n//     let v = ((x - rect.left) / rect.width) * 100;\n//     v = Math.max(0, Math.min(100, v));\n//     setPercent(v);\n//     onChange?.(Math.round(v));\n//   };\n\n//   const onDown = (e) => {\n//     update(e.clientX);\n\n//     const move = (ev) => update(ev.clientX);\n//     const up = () => {\n//       document.removeEventListener('mousemove', move);\n//       document.removeEventListener('mouseup', up);\n//     };\n\n//     document.addEventListener('mousemove', move);\n//     document.addEventListener('mouseup', up);\n//   };\n\n//   useEffect(() => setPercent(value), [value]);\n\n//   return (\n//     <div className=\"sliderControl\">\n//       <div className=\"sliderBar\" ref={barRef} onMouseDown={onDown}>\n//         <div className=\"sliderBarFill\" style={{ width: `${percent}%` }} />\n//         <div className=\"sliderHandle\" style={{ left: `${percent}%` }} />\n//       </div>\n//     </div>\n//   );\n// }\n"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,OAAO;AAAC,SAAAC,MAAA,IAAAC,OAAA;AAEjC,SAASC,MAAMA,CAAC;EAAEC,KAAK,GAAG,EAAE;EAAEC,GAAG,GAAG,CAAC;EAAEC,GAAG,GAAG,GAAG;EAAEC,YAAY,GAAG;AAAG,CAAC,EAAE;EAAAC,EAAA;EACrE,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGV,QAAQ,CAACO,YAAY,CAAC;EAEhD,MAAMI,OAAO,GAAI,CAACF,KAAK,GAAGJ,GAAG,KAAKC,GAAG,GAAGD,GAAG,CAAC,GAAI,GAAG;EAEnD,oBACEH,OAAA;IAAOU,SAAS,EAAC,WAAW;IAAAC,QAAA,gBAC1BX,OAAA;MAAMU,SAAS,EAAC,YAAY;MAAAC,QAAA,EAAET;IAAK;MAAAU,QAAA,EAAAC,YAAA;MAAAC,UAAA;MAAAC,YAAA;IAAA,OAAO,CAAC,eAC3Cf,OAAA;MACEgB,IAAI,EAAC,OAAO;MACZb,GAAG,EAAEA,GAAI;MACTC,GAAG,EAAEA,GAAI;MACTG,KAAK,EAAEA,KAAM;MACbU,QAAQ,EAAGC,CAAC,IAAKV,QAAQ,CAACW,MAAM,CAACD,CAAC,CAACE,MAAM,CAACb,KAAK,CAAC,CAAE;MAClDc,KAAK,EAAE;QAAE,WAAW,EAAE,GAAGZ,OAAO;MAAI,CAAE;MACtC,cAAYP;IAAM;MAAAU,QAAA,EAAAC,YAAA;MAAAC,UAAA;MAAAC,YAAA;IAAA,OACnB,CAAC;EAAA;IAAAH,QAAA,EAAAC,YAAA;IAAAC,UAAA;IAAAC,YAAA;EAAA,OACG,CAAC;AAEZ;AAACT,EAAA,CAnBQL,MAAM;AAAAqB,EAAA,GAANrB,MAAM;AAqBf,eAAeA,MAAM;;AAGrB;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA,IAAAqB,EAAA;AAAAC,YAAA,CAAAD,EAAA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}