feat: allows to continue to control phase when mouse leave the button

cheminfo · May 22, 2021 · 613e5da · 613e5da
1 parent 6e1fb29
commit 613e5da
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/src/component/elements/InputRange.jsx b/src/component/elements/InputRange.jsx
@@ -33,7 +33,8 @@ export default function InputRange({
   className,
 }) {
   const previousPosition = useRef(0);
-  const mouseMoveCallback = (event) => {
+
+  function mouseMoveCallback(event) {
     let diff = event.clientX - previousPosition.current;
     previousPosition.current = event.clientX;
     if (event.buttons === 1) {
@@ -42,13 +43,24 @@ export default function InputRange({
         name,
       });
     }
-  };
+  }
+
+  function mouseUpCallback() {
+    window.removeEventListener('mousemove', mouseMoveCallback);
+    window.removeEventListener('mouseup', mouseUpCallback);
+  }
+
+  function mouseDownCallback() {
+    previousPosition.current = event.clientX;
+    window.addEventListener('mousemove', mouseMoveCallback);
+    window.addEventListener('mouseup', mouseUpCallback);
+  }
 
   return (
     <div
       style={{ ...styles.container, ...style }}
       className={className}
-      onMouseMove={mouseMoveCallback}
+      onMouseDown={mouseDownCallback}
     >
       <span style={styles.label}>{label}</span>
     </div>