1 line
6.0 KiB
JSON
1 line
6.0 KiB
JSON
{"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 _s();\n const min = 0;\n const max = 100;\n const [value, setValue] = useState(50);\n const percent = (value - min) / (max - min) * 100;\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"rangeWrap\",\n children: /*#__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\": \"\\uAC12 \\uC870\\uC808\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 12,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 11,\n columnNumber: 5\n }, this);\n}\n_s(Slider, \"dmAZhsGIroUQtpNh7BRsxl5tam8=\");\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","_s","min","max","value","setValue","percent","className","children","type","onChange","e","Number","target","style","fileName","_jsxFileName","lineNumber","columnNumber","_c","$RefreshReg$"],"sources":["/Users/laurynj/Desktop/해양경찰업 공공사업/@GIS_함정용/GIS_함정용_리액트/dark/src/component/common/Slider.jsx"],"sourcesContent":["import { useState } from \"react\";\n\nfunction Slider() {\n const min = 0;\n const max = 100;\n const [value, setValue] = useState(50);\n\n const percent = ((value - min) / (max - min)) * 100;\n\n return (\n <div className=\"rangeWrap\">\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=\"값 조절\"\n />\n </div>\n );\n}\n\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// }\n"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,OAAO;AAAC,SAAAC,MAAA,IAAAC,OAAA;AAEjC,SAASC,MAAMA,CAAA,EAAG;EAAAC,EAAA;EAChB,MAAMC,GAAG,GAAG,CAAC;EACb,MAAMC,GAAG,GAAG,GAAG;EACf,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGR,QAAQ,CAAC,EAAE,CAAC;EAEtC,MAAMS,OAAO,GAAI,CAACF,KAAK,GAAGF,GAAG,KAAKC,GAAG,GAAGD,GAAG,CAAC,GAAI,GAAG;EAEnD,oBACEH,OAAA;IAAKQ,SAAS,EAAC,WAAW;IAAAC,QAAA,eACxBT,OAAA;MACEU,IAAI,EAAC,OAAO;MACZP,GAAG,EAAEA,GAAI;MACTC,GAAG,EAAEA,GAAI;MACTC,KAAK,EAAEA,KAAM;MACbM,QAAQ,EAAGC,CAAC,IAAKN,QAAQ,CAACO,MAAM,CAACD,CAAC,CAACE,MAAM,CAACT,KAAK,CAAC,CAAE;MAClDU,KAAK,EAAE;QAAE,WAAW,EAAE,GAAGR,OAAO;MAAI,CAAE;MACtC,cAAW;IAAM;MAAAS,QAAA,EAAAC,YAAA;MAAAC,UAAA;MAAAC,YAAA;IAAA,OAClB;EAAC;IAAAH,QAAA,EAAAC,YAAA;IAAAC,UAAA;IAAAC,YAAA;EAAA,OACC,CAAC;AAEV;AAACjB,EAAA,CApBQD,MAAM;AAAAmB,EAAA,GAANnB,MAAM;AAsBf,eAAeA,MAAM;;AAErB;;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,IAAAmB,EAAA;AAAAC,YAAA,CAAAD,EAAA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]} |