Made mouse event listener pointer listener, this allows use on mobile…

… and desktop
tzinas · Dec 1, 2022 · d14246f · d14246f
1 parent 89608ea
commit d14246f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/.gitignore b/.gitignore
@@ -20,3 +20,5 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+/.vs/slnx.sqlite
+/.vs/ProjectSettings.json
diff --git a/src/index.js b/src/index.js
@@ -83,22 +83,22 @@ const Thumb = ({barRef, divisions, leftIndex, leftColor, rightColor, setDivision
     setDivisions(_.clone(tempDivisions))
   }
 
-  const handleMouseUp = () => {
-    document.removeEventListener('mousemove', handleMouseMove)
-    document.removeEventListener('mouseup', handleMouseUp)
+  const handlePointerUp = () => {
+    document.removeEventListener('pointermove', handleMouseMove)
+    document.removeEventListener('pointerup', handlePointerUp)
   }
 
-  const handleMouseDown = event => {
+  const handlePointerDown = event => {
     oldX = event.clientX
     oldPercentages.left = divisions[leftIndex].percentage
     oldPercentages.right = divisions[rightIndex].percentage
 
-    document.addEventListener('mousemove', handleMouseMove)
-    document.addEventListener('mouseup', handleMouseUp)
+    document.addEventListener('pointermove', handleMouseMove)
+    document.addEventListener('pointerup', handlePointerUp)
   }
 
   return (
-    <SlideThumb onMouseDown={handleMouseDown} style={{borderLeftColor: leftColor, borderRightColor: rightColor}} />
+    <SlideThumb onPointerDown={handlePointerDown} style={{borderLeftColor: leftColor, borderRightColor: rightColor }} />
   )
 }