Update index.js

advanced-demo/index.js

@@ -1,5 +1,8 @@
 let lastPos;
 
+// gets cursor position from top
+const getCursorPos = e => e.pageY || e.touches[0].pageY;
+
 // clamp number in between given boundaries
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 
@@ -8,16 +11,18 @@ const setRange = e => {
     const input = document.querySelector('#inputs input[type="range"]');
     const inputText = document.querySelector('#inputs input[type="number"]');
     const bar = document.querySelector('#image div');
-    const newValue = clamp(inputText.value*1 + (lastPos - e.pageY), 0, 100);
-    lastPos = e.pageY || e.touches[0].pageY;
+    const currentPos = getCursorPos(e);
+    const newValue = clamp(inputText.value*1 + (lastPos - ), 0, 100);
+
+    lastPos = currentPos;
     input.value = newValue;
     inputText.value = newValue;
     bar.style.height = newValue + '%';
 };
 
 // set listener to change value on mouseMove, and to unset on mouseUp
 const hook = e => {
-    lastPos = e.pageY || e.touches[0].pageY;
+    lastPos = getCursorPos(e);
     document.body.classList.add('touchy'); // cursor after leaving image
     document.addEventListener('mousemove', setRange);
     document.addEventListener('mouseup', unhook);