From 74fee1faf9690e59c54d2e6c70cb2d1b9362d56f Mon Sep 17 00:00:00 2001
From: Rodgath <25994782+Rodgath@users.noreply.github.com>
Date: Sat, 5 Aug 2023 06:09:48 +0300
Subject: [PATCH 1/5] Create Judo Spin Box wrapper

---
 src/judo-spin.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/judo-spin.js b/src/judo-spin.js
index d11e4eb..2d6e35d 100644
--- a/src/judo-spin.js
+++ b/src/judo-spin.js
@@ -19,8 +19,11 @@ function judoSpin(element, options) {
   /* Current image starts at 0 or based on options entry */
   let currImagePos = convertCurrImageNumber(options.currImage) - 1;
 
-  /* Set image box element */
+  /* Set judo box element */
   let judoSpinBox;
+
+  /* Set judo box wrapper element */
+  let judoSpinWrapper;
   
   /* Check if 'element' is a valid DOM element */
   if (element instanceof HTMLElement || element instanceof Node) {
@@ -117,6 +120,16 @@ function judoSpin(element, options) {
     }
   })(judoSpinBox);
 
+  /* Create judoSpinBox wrapper */
+  (function(judoSpinBox) {
+    judoSpinWrapper = document.createElement('div');
+    judoSpinWrapper.classList.add('judo-spin-wrapper');
+    judoSpinWrapper.style.width = 'fit-content';
+    judoSpinWrapper.style.margin = '0 auto';
+    judoSpinBox.parentNode.insertBefore(judoSpinWrapper, judoSpinBox);
+    judoSpinWrapper.appendChild(judoSpinBox);
+  })(judoSpinBox);
+
   /* Handle mousedown event */
   const handleMouseDown = event => invokeMotion(event);
 

From 9ed36fd4884f3637ce0e7cac184d6e47d67da980 Mon Sep 17 00:00:00 2001
From: Rodgath <25994782+Rodgath@users.noreply.github.com>
Date: Sat, 5 Aug 2023 06:10:41 +0300
Subject: [PATCH 2/5] Create the scroller draggable element

---
 demo/css/style.css       | 29 ++++++++++++++
 demo/index.html          |  4 ++
 demo/js/judo-spin.js     | 87 +++++++++++++++++++++++++++++++++++++++-
 demo/js/judo-spin.min.js |  2 +-
 dist/js/judo-spin.js     | 87 +++++++++++++++++++++++++++++++++++++++-
 dist/js/judo-spin.min.js |  2 +-
 src/judo-spin.js         | 72 +++++++++++++++++++++++++++++++++
 7 files changed, 279 insertions(+), 4 deletions(-)

diff --git a/demo/css/style.css b/demo/css/style.css
index 33ab5cc..de84cf7 100644
--- a/demo/css/style.css
+++ b/demo/css/style.css
@@ -179,4 +179,33 @@ body {
 .code-box pre {
   margin   : 0;
   font-size: 13px
+}
+
+
+
+
+
+
+#judo-scroller {
+  position: relative;
+  width: 100%;
+  height: 20px;
+  background-color: #f1f1f1;
+  margin: 20px auto;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+#judo-draggable {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 60px;
+  height: 20px;
+  background-color: #4caf50;
+  border-radius: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index 2000be7..63eac3b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -66,6 +66,10 @@ <h2>360° degrees image spinner and rotation using JavaScript. </h2>
         <img src="images/36.png" alt="Image 36">
       </div>
 
+      <div id="judo-scroller">
+        <div id="judo-draggable"></div>
+      </div>
+
       <div class="accordion">
         <div class="accordion-item">
           <div class="accordion-header">HTML Code</div>
diff --git a/demo/js/judo-spin.js b/demo/js/judo-spin.js
index d11e4eb..4480ef7 100644
--- a/demo/js/judo-spin.js
+++ b/demo/js/judo-spin.js
@@ -19,8 +19,11 @@ function judoSpin(element, options) {
   /* Current image starts at 0 or based on options entry */
   let currImagePos = convertCurrImageNumber(options.currImage) - 1;
 
-  /* Set image box element */
+  /* Set judo box element */
   let judoSpinBox;
+
+  /* Set judo box wrapper element */
+  let judoSpinWrapper;
   
   /* Check if 'element' is a valid DOM element */
   if (element instanceof HTMLElement || element instanceof Node) {
@@ -117,6 +120,16 @@ function judoSpin(element, options) {
     }
   })(judoSpinBox);
 
+  /* Create judoSpinBox wrapper */
+  (function(judoSpinBox) {
+    judoSpinWrapper = document.createElement('div');
+    judoSpinWrapper.classList.add('judo-spin-wrapper');
+    judoSpinWrapper.style.width = 'fit-content';
+    judoSpinWrapper.style.margin = '0 auto';
+    judoSpinBox.parentNode.insertBefore(judoSpinWrapper, judoSpinBox);
+    judoSpinWrapper.appendChild(judoSpinBox);
+  })(judoSpinBox);
+
   /* Handle mousedown event */
   const handleMouseDown = event => invokeMotion(event);
 
@@ -248,6 +261,78 @@ function judoSpin(element, options) {
 
     return direction;
   }
+
+
+  function scrollerHandler() {
+    
+    const judoScroller = document.getElementById('judo-scroller');
+    const judoDraggable = document.getElementById('judo-draggable');
+
+    /* Flag to track if the button is being dragged */
+    let dragging = false;
+
+    /* Add event listeners to the draggable button for dragging */
+    judoDraggable.addEventListener('mousedown', handleDragStart);
+    judoDraggable.addEventListener('touchstart', handleDragStart);
+
+    /* Handle drag start event */
+    function handleDragStart(event) {
+      event.preventDefault();
+      dragging = true;
+      
+      document.addEventListener('mousemove', handleDragMove);
+      document.addEventListener('touchmove', handleDragMove);
+    }
+
+    /* Handle drag move event */
+    function handleDragMove(event) {
+      if (dragging) {
+        const judoScrollerRect = judoScroller.getBoundingClientRect();
+        const buttonWidth = judoDraggable.offsetWidth;
+        const minScrollPos = 0;
+        const maxScrollPos = judoScroller.offsetWidth - buttonWidth;
+
+        let scrollPos;
+
+        if (event.type === 'touchmove') {
+          scrollPos = event.touches[0].clientX - judoScrollerRect.left - buttonWidth / 2;
+        } else {
+          scrollPos = event.clientX - judoScrollerRect.left - buttonWidth / 2;
+        }
+
+        /* Ensure the scroll position stays within bounds */
+        scrollPos = Math.max(minScrollPos, Math.min(maxScrollPos, scrollPos));
+
+        /* Update the draggable button position */
+        judoDraggable.style.left = `${scrollPos}px`;
+
+        /* Calculate the current angle based on the scroll position */
+        const maxRotation = 360; // 360 degrees for a full rotation
+        const anglePerScroll = maxRotation / maxScrollPos;
+        currentAngle = Math.floor(scrollPos * anglePerScroll);
+
+        /* Adjust currentAngle to be within the range of 0 to 359 degrees */
+        currentAngle = (currentAngle % maxRotation + maxRotation) % maxRotation;
+
+        /* Show the corresponding image based on the current angle */
+        showImageForAngle(currentAngle);
+      }
+    }
+
+    /* Handle drag end event */
+    function handleDragEnd() {
+      dragging = false;
+      /* Remove the mousemove and touchmove event listeners */
+      document.removeEventListener('mousemove', handleDragMove);
+      document.removeEventListener('touchmove', handleDragMove);
+    }
+
+    /* Add event listeners for mouseup and touchend events */
+    document.addEventListener('mouseup', handleDragEnd);
+    document.addEventListener('touchend', handleDragEnd);
+  }
+
+  scrollerHandler();
 }
 
 /* Call the function for elements with the 'data-judo-spin' attribute */
diff --git a/demo/js/judo-spin.min.js b/demo/js/judo-spin.min.js
index 31e53c2..0cb3e44 100644
--- a/demo/js/judo-spin.min.js
+++ b/demo/js/judo-spin.min.js
@@ -1 +1 @@
-"use strict";function judoSpin(e,t){t||(o=e.dataset.judoSpin)&&(t=JSON.parse(o));var n,o,r=function(e){e=parseInt(e,10);return isNaN(e)?1:Math.abs(e)}((t=Object.assign({},{currImg:1,images:[]},t)).currImage)-1,u=e instanceof HTMLElement||e instanceof Node?e:document.querySelector(e),i=function(){var e;e=(t.hasOwnProperty("images")&&Array.isArray(t.images)&&0<t.images.length&&t.images.forEach(function(e){var t=document.createElement("img");t.src=e.src,t.alt=e.title,u.appendChild(t)}),u.querySelectorAll("img"));return e}().length,s=360/i,a=0<r?r*s:0,l=!1,c=document.createElement("div");(n=c).className="judo-spin-overlay",n.style.position="absolute",n.style.width="100%",n.style.height="100%",n.style.top="0",n.style.left="0",n.style.zIndex="1",u.appendChild(n),n.addEventListener("mouseover",function(){return n.style.cursor="e-resize"}),n.addEventListener("mouseout",function(){return n.style.cursor="auto"}),(o=u).classList.add("judo-spin-container"),o.style.position="relative",o.style.width="100%",o.style.height="auto",o.style.overflow="hidden";for(var d=u.getElementsByTagName("img"),m=0;m<d.length;m++)d[m].style.width="100%";c.addEventListener("mousedown",function(e){return h(e)}),c.addEventListener("touchstart",function(e){return h(e)});var h=function(e){e.preventDefault();var t="touchstart"===e.type?"touchmove":"mousemove",n="touchstart"===e.type?f:v,e=(console.log(e.type),l=!0,p(a));a=e*s,c.addEventListener(t,n)},v=(document.addEventListener("mouseup",function(){l=!1,c.removeEventListener("mousemove",v)}),document.addEventListener("touchend",function(){l=!1,c.removeEventListener("touchmove",f)}),function(e){return y(e)}),f=function(e){return y(e)},y=function(e){l&&("right"===(e=function(e,t){var n;{var o;null!==E&&null!==L&&(S<(o=e-E)?n="right":o<-S&&(n="left"))}return E=e,L=t,n}(("touchmove"===e.type?e.touches[0]:e).clientX,("touchmove"===e.type?e.touches[0]:e).clientY))?r++:"left"===e&&r--,g(a=((a=r*s)%360+360)%360))},p=function(e){e=Math.floor(e/s);return e<0?e=i-1:i<=e&&(e=0),e},g=function(e){for(var t=Math.floor(e/s)+1,n=1;n<=i;n++)u.querySelector("img:nth-child("+n+")").style.display=n===t?"block":"none"},E=(g(a),null),L=null,S=1}var judoSpinElements=document.querySelectorAll("[data-judo-spin]");judoSpinElements.forEach(function(e){return judoSpin(e)});
\ No newline at end of file
+"use strict";function judoSpin(e,t){t||(r=e.dataset.judoSpin)&&(t=JSON.parse(r));var n,o,r,u=function(e){e=parseInt(e,10);return isNaN(e)?1:Math.abs(e)}((t=Object.assign({},{currImg:1,images:[]},t)).currImage)-1,i=e instanceof HTMLElement||e instanceof Node?e:document.querySelector(e),s=function(){var e;e=(t.hasOwnProperty("images")&&Array.isArray(t.images)&&0<t.images.length&&t.images.forEach(function(e){var t=document.createElement("img");t.src=e.src,t.alt=e.title,i.appendChild(t)}),i.querySelectorAll("img"));return e}().length,a=360/s,c=0<u?u*a:0,d=!1,l=document.createElement("div");(o=l).className="judo-spin-overlay",o.style.position="absolute",o.style.width="100%",o.style.height="100%",o.style.top="0",o.style.left="0",o.style.zIndex="1",i.appendChild(o),o.addEventListener("mouseover",function(){return o.style.cursor="e-resize"}),o.addEventListener("mouseout",function(){return o.style.cursor="auto"}),(r=i).classList.add("judo-spin-container"),r.style.position="relative",r.style.width="100%",r.style.height="auto",r.style.overflow="hidden";for(var m=i.getElementsByTagName("img"),v=0;v<m.length;v++)m[v].style.width="100%";e=i,(n=document.createElement("div")).classList.add("judo-spin-wrapper"),n.style.width="fit-content",n.style.margin="0 auto",e.parentNode.insertBefore(n,e),n.appendChild(e);l.addEventListener("mousedown",function(e){return y(e)}),l.addEventListener("touchstart",function(e){return y(e)});var h,f,p,y=function(e){e.preventDefault();var t="touchstart"===e.type?"touchmove":"mousemove",n="touchstart"===e.type?E:g,e=(console.log(e.type),d=!0,j(c));c=e*a,l.addEventListener(t,n)},g=(document.addEventListener("mouseup",function(){d=!1,l.removeEventListener("mousemove",g)}),document.addEventListener("touchend",function(){d=!1,l.removeEventListener("touchmove",E)}),function(e){return L(e)}),E=function(e){return L(e)},L=function(e){d&&("right"===(e=function(e,t){var n;{var o;null!==w&&null!==M&&(N<(o=e-w)?n="right":o<-N&&(n="left"))}return w=e,M=t,n}(("touchmove"===e.type?e.touches[0]:e).clientX,("touchmove"===e.type?e.touches[0]:e).clientY))?u++:"left"===e&&u--,S(c=((c=u*a)%360+360)%360))},j=function(e){e=Math.floor(e/a);return e<0?e=s-1:s<=e&&(e=0),e},S=function(e){for(var t=Math.floor(e/a)+1,n=1;n<=s;n++)i.querySelector("img:nth-child("+n+")").style.display=n===t?"block":"none"},w=(S(c),null),M=null,N=1;function I(e){e.preventDefault(),p=!0,document.addEventListener("mousemove",b),document.addEventListener("touchmove",b)}function b(e){var t,n,o;p&&(t=h.getBoundingClientRect(),n=f.offsetWidth,o=h.offsetWidth-n,e="touchmove"===e.type?e.touches[0].clientX-t.left-n/2:e.clientX-t.left-n/2,e=Math.max(0,Math.min(o,e)),f.style.left="".concat(e,"px"),c=Math.floor(e*(360/o)),S(c=(c%360+360)%360))}function B(){p=!1,document.removeEventListener("mousemove",b),document.removeEventListener("touchmove",b)}h=document.getElementById("judo-scroller"),f=document.getElementById("judo-draggable"),p=!1,f.addEventListener("mousedown",I),f.addEventListener("touchstart",I),document.addEventListener("mouseup",B),document.addEventListener("touchend",B)}var judoSpinElements=document.querySelectorAll("[data-judo-spin]");judoSpinElements.forEach(function(e){return judoSpin(e)});
\ No newline at end of file
diff --git a/dist/js/judo-spin.js b/dist/js/judo-spin.js
index 6c596e9..1d9b346 100644
--- a/dist/js/judo-spin.js
+++ b/dist/js/judo-spin.js
@@ -33,8 +33,11 @@ function judoSpin(element, options) {
   /* Current image starts at 0 or based on options entry */
   let currImagePos = convertCurrImageNumber(options.currImage) - 1;
 
-  /* Set image box element */
+  /* Set judo box element */
   let judoSpinBox;
+
+  /* Set judo box wrapper element */
+  let judoSpinWrapper;
   
   /* Check if 'element' is a valid DOM element */
   if (element instanceof HTMLElement || element instanceof Node) {
@@ -131,6 +134,16 @@ function judoSpin(element, options) {
     }
   })(judoSpinBox);
 
+  /* Create judoSpinBox wrapper */
+  (function(judoSpinBox) {
+    judoSpinWrapper = document.createElement('div');
+    judoSpinWrapper.classList.add('judo-spin-wrapper');
+    judoSpinWrapper.style.width = 'fit-content';
+    judoSpinWrapper.style.margin = '0 auto';
+    judoSpinBox.parentNode.insertBefore(judoSpinWrapper, judoSpinBox);
+    judoSpinWrapper.appendChild(judoSpinBox);
+  })(judoSpinBox);
+
   /* Handle mousedown event */
   const handleMouseDown = event => invokeMotion(event);
 
@@ -262,6 +275,78 @@ function judoSpin(element, options) {
 
     return direction;
   }
+
+
+  function scrollerHandler() {
+    
+    const judoScroller = document.getElementById('judo-scroller');
+    const judoDraggable = document.getElementById('judo-draggable');
+
+    /* Flag to track if the button is being dragged */
+    let dragging = false;
+
+    /* Add event listeners to the draggable button for dragging */
+    judoDraggable.addEventListener('mousedown', handleDragStart);
+    judoDraggable.addEventListener('touchstart', handleDragStart);
+
+    /* Handle drag start event */
+    function handleDragStart(event) {
+      event.preventDefault();
+      dragging = true;
+      
+      document.addEventListener('mousemove', handleDragMove);
+      document.addEventListener('touchmove', handleDragMove);
+    }
+
+    /* Handle drag move event */
+    function handleDragMove(event) {
+      if (dragging) {
+        const judoScrollerRect = judoScroller.getBoundingClientRect();
+        const buttonWidth = judoDraggable.offsetWidth;
+        const minScrollPos = 0;
+        const maxScrollPos = judoScroller.offsetWidth - buttonWidth;
+
+        let scrollPos;
+
+        if (event.type === 'touchmove') {
+          scrollPos = event.touches[0].clientX - judoScrollerRect.left - buttonWidth / 2;
+        } else {
+          scrollPos = event.clientX - judoScrollerRect.left - buttonWidth / 2;
+        }
+
+        /* Ensure the scroll position stays within bounds */
+        scrollPos = Math.max(minScrollPos, Math.min(maxScrollPos, scrollPos));
+
+        /* Update the draggable button position */
+        judoDraggable.style.left = `${scrollPos}px`;
+
+        /* Calculate the current angle based on the scroll position */
+        const maxRotation = 360; // 360 degrees for a full rotation
+        const anglePerScroll = maxRotation / maxScrollPos;
+        currentAngle = Math.floor(scrollPos * anglePerScroll);
+
+        /* Adjust currentAngle to be within the range of 0 to 359 degrees */
+        currentAngle = (currentAngle % maxRotation + maxRotation) % maxRotation;
+
+        /* Show the corresponding image based on the current angle */
+        showImageForAngle(currentAngle);
+      }
+    }
+
+    /* Handle drag end event */
+    function handleDragEnd() {
+      dragging = false;
+      /* Remove the mousemove and touchmove event listeners */
+      document.removeEventListener('mousemove', handleDragMove);
+      document.removeEventListener('touchmove', handleDragMove);
+    }
+
+    /* Add event listeners for mouseup and touchend events */
+    document.addEventListener('mouseup', handleDragEnd);
+    document.addEventListener('touchend', handleDragEnd);
+  }
+
+  scrollerHandler();
 }
 
 /* Call the function for elements with the 'data-judo-spin' attribute */
diff --git a/dist/js/judo-spin.min.js b/dist/js/judo-spin.min.js
index c713ad8..d445ec2 100644
--- a/dist/js/judo-spin.min.js
+++ b/dist/js/judo-spin.min.js
@@ -12,4 +12,4 @@
  * @licenseMIT  https://github.com/Rodgath/judo-spin/blob/main/LICENSE
  * @demoExample https://rodgath.github.io/judo-spin/demo/
  */
-"use strict";function judoSpin(e,t){t||(o=e.dataset.judoSpin)&&(t=JSON.parse(o));var n,o,r=function(e){e=parseInt(e,10);return isNaN(e)?1:Math.abs(e)}((t=Object.assign({},{currImg:1,images:[]},t)).currImage)-1,u=e instanceof HTMLElement||e instanceof Node?e:document.querySelector(e),i=function(){var e;e=(t.hasOwnProperty("images")&&Array.isArray(t.images)&&0<t.images.length&&t.images.forEach(function(e){var t=document.createElement("img");t.src=e.src,t.alt=e.title,u.appendChild(t)}),u.querySelectorAll("img"));return e}().length,s=360/i,a=0<r?r*s:0,l=!1,c=document.createElement("div");(n=c).className="judo-spin-overlay",n.style.position="absolute",n.style.width="100%",n.style.height="100%",n.style.top="0",n.style.left="0",n.style.zIndex="1",u.appendChild(n),n.addEventListener("mouseover",function(){return n.style.cursor="e-resize"}),n.addEventListener("mouseout",function(){return n.style.cursor="auto"}),(o=u).classList.add("judo-spin-container"),o.style.position="relative",o.style.width="100%",o.style.height="auto",o.style.overflow="hidden";for(var d=u.getElementsByTagName("img"),m=0;m<d.length;m++)d[m].style.width="100%";c.addEventListener("mousedown",function(e){return h(e)}),c.addEventListener("touchstart",function(e){return h(e)});var h=function(e){e.preventDefault();var t="touchstart"===e.type?"touchmove":"mousemove",n="touchstart"===e.type?f:v,e=(console.log(e.type),l=!0,p(a));a=e*s,c.addEventListener(t,n)},v=(document.addEventListener("mouseup",function(){l=!1,c.removeEventListener("mousemove",v)}),document.addEventListener("touchend",function(){l=!1,c.removeEventListener("touchmove",f)}),function(e){return y(e)}),f=function(e){return y(e)},y=function(e){l&&("right"===(e=function(e,t){var n;{var o;null!==E&&null!==L&&(S<(o=e-E)?n="right":o<-S&&(n="left"))}return E=e,L=t,n}(("touchmove"===e.type?e.touches[0]:e).clientX,("touchmove"===e.type?e.touches[0]:e).clientY))?r++:"left"===e&&r--,g(a=((a=r*s)%360+360)%360))},p=function(e){e=Math.floor(e/s);return e<0?e=i-1:i<=e&&(e=0),e},g=function(e){for(var t=Math.floor(e/s)+1,n=1;n<=i;n++)u.querySelector("img:nth-child("+n+")").style.display=n===t?"block":"none"},E=(g(a),null),L=null,S=1}var judoSpinElements=document.querySelectorAll("[data-judo-spin]");judoSpinElements.forEach(function(e){return judoSpin(e)});
\ No newline at end of file
+"use strict";function judoSpin(e,t){t||(r=e.dataset.judoSpin)&&(t=JSON.parse(r));var n,o,r,u=function(e){e=parseInt(e,10);return isNaN(e)?1:Math.abs(e)}((t=Object.assign({},{currImg:1,images:[]},t)).currImage)-1,i=e instanceof HTMLElement||e instanceof Node?e:document.querySelector(e),s=function(){var e;e=(t.hasOwnProperty("images")&&Array.isArray(t.images)&&0<t.images.length&&t.images.forEach(function(e){var t=document.createElement("img");t.src=e.src,t.alt=e.title,i.appendChild(t)}),i.querySelectorAll("img"));return e}().length,a=360/s,c=0<u?u*a:0,d=!1,l=document.createElement("div");(o=l).className="judo-spin-overlay",o.style.position="absolute",o.style.width="100%",o.style.height="100%",o.style.top="0",o.style.left="0",o.style.zIndex="1",i.appendChild(o),o.addEventListener("mouseover",function(){return o.style.cursor="e-resize"}),o.addEventListener("mouseout",function(){return o.style.cursor="auto"}),(r=i).classList.add("judo-spin-container"),r.style.position="relative",r.style.width="100%",r.style.height="auto",r.style.overflow="hidden";for(var m=i.getElementsByTagName("img"),v=0;v<m.length;v++)m[v].style.width="100%";e=i,(n=document.createElement("div")).classList.add("judo-spin-wrapper"),n.style.width="fit-content",n.style.margin="0 auto",e.parentNode.insertBefore(n,e),n.appendChild(e);l.addEventListener("mousedown",function(e){return y(e)}),l.addEventListener("touchstart",function(e){return y(e)});var h,f,p,y=function(e){e.preventDefault();var t="touchstart"===e.type?"touchmove":"mousemove",n="touchstart"===e.type?E:g,e=(console.log(e.type),d=!0,j(c));c=e*a,l.addEventListener(t,n)},g=(document.addEventListener("mouseup",function(){d=!1,l.removeEventListener("mousemove",g)}),document.addEventListener("touchend",function(){d=!1,l.removeEventListener("touchmove",E)}),function(e){return L(e)}),E=function(e){return L(e)},L=function(e){d&&("right"===(e=function(e,t){var n;{var o;null!==w&&null!==M&&(N<(o=e-w)?n="right":o<-N&&(n="left"))}return w=e,M=t,n}(("touchmove"===e.type?e.touches[0]:e).clientX,("touchmove"===e.type?e.touches[0]:e).clientY))?u++:"left"===e&&u--,S(c=((c=u*a)%360+360)%360))},j=function(e){e=Math.floor(e/a);return e<0?e=s-1:s<=e&&(e=0),e},S=function(e){for(var t=Math.floor(e/a)+1,n=1;n<=s;n++)i.querySelector("img:nth-child("+n+")").style.display=n===t?"block":"none"},w=(S(c),null),M=null,N=1;function I(e){e.preventDefault(),p=!0,document.addEventListener("mousemove",b),document.addEventListener("touchmove",b)}function b(e){var t,n,o;p&&(t=h.getBoundingClientRect(),n=f.offsetWidth,o=h.offsetWidth-n,e="touchmove"===e.type?e.touches[0].clientX-t.left-n/2:e.clientX-t.left-n/2,e=Math.max(0,Math.min(o,e)),f.style.left="".concat(e,"px"),c=Math.floor(e*(360/o)),S(c=(c%360+360)%360))}function B(){p=!1,document.removeEventListener("mousemove",b),document.removeEventListener("touchmove",b)}h=document.getElementById("judo-scroller"),f=document.getElementById("judo-draggable"),p=!1,f.addEventListener("mousedown",I),f.addEventListener("touchstart",I),document.addEventListener("mouseup",B),document.addEventListener("touchend",B)}var judoSpinElements=document.querySelectorAll("[data-judo-spin]");judoSpinElements.forEach(function(e){return judoSpin(e)});
\ No newline at end of file
diff --git a/src/judo-spin.js b/src/judo-spin.js
index 2d6e35d..4480ef7 100644
--- a/src/judo-spin.js
+++ b/src/judo-spin.js
@@ -261,6 +261,78 @@ function judoSpin(element, options) {
 
     return direction;
   }
+
+
+  function scrollerHandler() {
+    
+    const judoScroller = document.getElementById('judo-scroller');
+    const judoDraggable = document.getElementById('judo-draggable');
+
+    /* Flag to track if the button is being dragged */
+    let dragging = false;
+
+    /* Add event listeners to the draggable button for dragging */
+    judoDraggable.addEventListener('mousedown', handleDragStart);
+    judoDraggable.addEventListener('touchstart', handleDragStart);
+
+    /* Handle drag start event */
+    function handleDragStart(event) {
+      event.preventDefault();
+      dragging = true;
+      
+      document.addEventListener('mousemove', handleDragMove);
+      document.addEventListener('touchmove', handleDragMove);
+    }
+
+    /* Handle drag move event */
+    function handleDragMove(event) {
+      if (dragging) {
+        const judoScrollerRect = judoScroller.getBoundingClientRect();
+        const buttonWidth = judoDraggable.offsetWidth;
+        const minScrollPos = 0;
+        const maxScrollPos = judoScroller.offsetWidth - buttonWidth;
+
+        let scrollPos;
+
+        if (event.type === 'touchmove') {
+          scrollPos = event.touches[0].clientX - judoScrollerRect.left - buttonWidth / 2;
+        } else {
+          scrollPos = event.clientX - judoScrollerRect.left - buttonWidth / 2;
+        }
+
+        /* Ensure the scroll position stays within bounds */
+        scrollPos = Math.max(minScrollPos, Math.min(maxScrollPos, scrollPos));
+
+        /* Update the draggable button position */
+        judoDraggable.style.left = `${scrollPos}px`;
+
+        /* Calculate the current angle based on the scroll position */
+        const maxRotation = 360; // 360 degrees for a full rotation
+        const anglePerScroll = maxRotation / maxScrollPos;
+        currentAngle = Math.floor(scrollPos * anglePerScroll);
+
+        /* Adjust currentAngle to be within the range of 0 to 359 degrees */
+        currentAngle = (currentAngle % maxRotation + maxRotation) % maxRotation;
+
+        /* Show the corresponding image based on the current angle */
+        showImageForAngle(currentAngle);
+      }
+    }
+
+    /* Handle drag end event */
+    function handleDragEnd() {
+      dragging = false;
+      /* Remove the mousemove and touchmove event listeners */
+      document.removeEventListener('mousemove', handleDragMove);
+      document.removeEventListener('touchmove', handleDragMove);
+    }
+
+    /* Add event listeners for mouseup and touchend events */
+    document.addEventListener('mouseup', handleDragEnd);
+    document.addEventListener('touchend', handleDragEnd);
+  }
+
+  scrollerHandler();
 }
 
 /* Call the function for elements with the 'data-judo-spin' attribute */

From a5658e2d02331761ed15004586fedef48691384c Mon Sep 17 00:00:00 2001
From: Rodgath <25994782+Rodgath@users.noreply.github.com>
Date: Sat, 5 Aug 2023 06:32:46 +0300
Subject: [PATCH 3/5] Add Judo scroller programmatically and append to Judo
 wrapper

---
 demo/css/style.css       | 29 -----------------------------
 demo/index.html          |  4 ----
 demo/js/judo-spin.js     | 36 ++++++++++++++++++++++++++++++++----
 demo/js/judo-spin.min.js |  2 +-
 dist/js/judo-spin.js     | 36 ++++++++++++++++++++++++++++++++----
 dist/js/judo-spin.min.js |  2 +-
 src/judo-spin.js         | 36 ++++++++++++++++++++++++++++++++----
 7 files changed, 98 insertions(+), 47 deletions(-)

diff --git a/demo/css/style.css b/demo/css/style.css
index de84cf7..33ab5cc 100644
--- a/demo/css/style.css
+++ b/demo/css/style.css
@@ -179,33 +179,4 @@ body {
 .code-box pre {
   margin   : 0;
   font-size: 13px
-}
-
-
-
-
-
-
-#judo-scroller {
-  position: relative;
-  width: 100%;
-  height: 20px;
-  background-color: #f1f1f1;
-  margin: 20px auto;
-  border-radius: 10px;
-  cursor: pointer;
-}
-
-#judo-draggable {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 60px;
-  height: 20px;
-  background-color: #4caf50;
-  border-radius: 20px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index 63eac3b..2000be7 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -66,10 +66,6 @@ <h2>360° degrees image spinner and rotation using JavaScript. </h2>
         <img src="images/36.png" alt="Image 36">
       </div>
 
-      <div id="judo-scroller">
-        <div id="judo-draggable"></div>
-      </div>
-
       <div class="accordion">
         <div class="accordion-item">
           <div class="accordion-header">HTML Code</div>
diff --git a/demo/js/judo-spin.js b/demo/js/judo-spin.js
index 4480ef7..40d94f5 100644
--- a/demo/js/judo-spin.js
+++ b/demo/js/judo-spin.js
@@ -262,12 +262,40 @@ function judoSpin(element, options) {
     return direction;
   }
 
-
+  /* Handle draggable image scroller */
   function scrollerHandler() {
-    
-    const judoScroller = document.getElementById('judo-scroller');
-    const judoDraggable = document.getElementById('judo-draggable');
 
+    /* Create Judo scroller element */
+    const judoScroller = document.createElement('div');
+    judoScroller.id = 'judo-scroller';
+    judoScroller.style.cssText = `
+    position: relative;
+    width: 100%;
+    height: 20px;
+    background-color: #f1f1f1;
+    margin: 20px auto;
+    border-radius: 10px;
+    cursor: pointer;`;
+
+    /* Create Judo draggable element */
+    const judoDraggable = document.createElement('div');
+    judoDraggable.id = 'judo-draggable';
+    judoDraggable.style.cssText = `position: absolute;
+    top: 0;
+    left: 0;
+    width: 60px;
+    height: 20px;
+    background-color: #4caf50;
+    border-radius: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;`;
+    
+    /* Append elements to respective parent nodes */
+    judoScroller.appendChild(judoDraggable);
+    judoSpinWrapper.appendChild(judoScroller);
+    
     /* Flag to track if the button is being dragged */
     let dragging = false;
 
diff --git a/demo/js/judo-spin.min.js b/demo/js/judo-spin.min.js
index 0cb3e44..f7ab9d8 100644
--- a/demo/js/judo-spin.min.js
+++ b/demo/js/judo-spin.min.js
@@ -1 +1 @@
-"use strict";function judoSpin(e,t){t||(r=e.dataset.judoSpin)&&(t=JSON.parse(r));var n,o,r,u=function(e){e=parseInt(e,10);return isNaN(e)?1:Math.abs(e)}((t=Object.assign({},{currImg:1,images:[]},t)).currImage)-1,i=e instanceof HTMLElement||e instanceof Node?e:document.querySelector(e),s=function(){var e;e=(t.hasOwnProperty("images")&&Array.isArray(t.images)&&0<t.images.length&&t.images.forEach(function(e){var t=document.createElement("img");t.src=e.src,t.alt=e.title,i.appendChild(t)}),i.querySelectorAll("img"));return e}().length,a=360/s,c=0<u?u*a:0,d=!1,l=document.createElement("div");(o=l).className="judo-spin-overlay",o.style.position="absolute",o.style.width="100%",o.style.height="100%",o.style.top="0",o.style.left="0",o.style.zIndex="1",i.appendChild(o),o.addEventListener("mouseover",function(){return o.style.cursor="e-resize"}),o.addEventListener("mouseout",function(){return o.style.cursor="auto"}),(r=i).classList.add("judo-spin-container"),r.style.position="relative",r.style.width="100%",r.style.height="auto",r.style.overflow="hidden";for(var m=i.getElementsByTagName("img"),v=0;v<m.length;v++)m[v].style.width="100%";e=i,(n=document.createElement("div")).classList.add("judo-spin-wrapper"),n.style.width="fit-content",n.style.margin="0 auto",e.parentNode.insertBefore(n,e),n.appendChild(e);l.addEventListener("mousedown",function(e){return y(e)}),l.addEventListener("touchstart",function(e){return y(e)});var h,f,p,y=function(e){e.preventDefault();var t="touchstart"===e.type?"touchmove":"mousemove",n="touchstart"===e.type?E:g,e=(console.log(e.type),d=!0,j(c));c=e*a,l.addEventListener(t,n)},g=(document.addEventListener("mouseup",function(){d=!1,l.removeEventListener("mousemove",g)}),document.addEventListener("touchend",function(){d=!1,l.removeEventListener("touchmove",E)}),function(e){return L(e)}),E=function(e){return L(e)},L=function(e){d&&("right"===(e=function(e,t){var n;{var o;null!==w&&null!==M&&(N<(o=e-w)?n="right":o<-N&&(n="left"))}return w=e,M=t,n}(("touchmove"===e.type?e.touches[0]:e).clientX,("touchmove"===e.type?e.touches[0]:e).clientY))?u++:"left"===e&&u--,S(c=((c=u*a)%360+360)%360))},j=function(e){e=Math.floor(e/a);return e<0?e=s-1:s<=e&&(e=0),e},S=function(e){for(var t=Math.floor(e/a)+1,n=1;n<=s;n++)i.querySelector("img:nth-child("+n+")").style.display=n===t?"block":"none"},w=(S(c),null),M=null,N=1;function I(e){e.preventDefault(),p=!0,document.addEventListener("mousemove",b),document.addEventListener("touchmove",b)}function b(e){var t,n,o;p&&(t=h.getBoundingClientRect(),n=f.offsetWidth,o=h.offsetWidth-n,e="touchmove"===e.type?e.touches[0].clientX-t.left-n/2:e.clientX-t.left-n/2,e=Math.max(0,Math.min(o,e)),f.style.left="".concat(e,"px"),c=Math.floor(e*(360/o)),S(c=(c%360+360)%360))}function B(){p=!1,document.removeEventListener("mousemove",b),document.removeEventListener("touchmove",b)}h=document.getElementById("judo-scroller"),f=document.getElementById("judo-draggable"),p=!1,f.addEventListener("mousedown",I),f.addEventListener("touchstart",I),document.addEventListener("mouseup",B),document.addEventListener("touchend",B)}var judoSpinElements=document.querySelectorAll("[data-judo-spin]");judoSpinElements.forEach(function(e){return judoSpin(e)});
\ No newline at end of file
+"use strict";function judoSpin(e,t){t||(r=e.dataset.judoSpin)&&(t=JSON.parse(r));var n,o,r,i=function(e){e=parseInt(e,10);return isNaN(e)?1:Math.abs(e)}((t=Object.assign({},{currImg:1,images:[]},t)).currImage)-1,u=e instanceof HTMLElement||e instanceof Node?e:document.querySelector(e),s=function(){var e;e=(t.hasOwnProperty("images")&&Array.isArray(t.images)&&0<t.images.length&&t.images.forEach(function(e){var t=document.createElement("img");t.src=e.src,t.alt=e.title,u.appendChild(t)}),u.querySelectorAll("img"));return e}().length,a=360/s,d=0<i?i*a:0,c=!1,l=document.createElement("div");(o=l).className="judo-spin-overlay",o.style.position="absolute",o.style.width="100%",o.style.height="100%",o.style.top="0",o.style.left="0",o.style.zIndex="1",u.appendChild(o),o.addEventListener("mouseover",function(){return o.style.cursor="e-resize"}),o.addEventListener("mouseout",function(){return o.style.cursor="auto"}),(r=u).classList.add("judo-spin-container"),r.style.position="relative",r.style.width="100%",r.style.height="auto",r.style.overflow="hidden";for(var m=u.getElementsByTagName("img"),h=0;h<m.length;h++)m[h].style.width="100%";e=u,(n=document.createElement("div")).classList.add("judo-spin-wrapper"),n.style.width="fit-content",n.style.margin="0 auto",e.parentNode.insertBefore(n,e),n.appendChild(e);l.addEventListener("mousedown",function(e){return y(e)}),l.addEventListener("touchstart",function(e){return y(e)});var v,f,p,y=function(e){e.preventDefault();var t="touchstart"===e.type?"touchmove":"mousemove",n="touchstart"===e.type?E:g,e=(console.log(e.type),c=!0,j(d));d=e*a,l.addEventListener(t,n)},g=(document.addEventListener("mouseup",function(){c=!1,l.removeEventListener("mousemove",g)}),document.addEventListener("touchend",function(){c=!1,l.removeEventListener("touchmove",E)}),function(e){return L(e)}),E=function(e){return L(e)},L=function(e){c&&("right"===(e=function(e,t){var n;{var o;null!==w&&null!==b&&(S<(o=e-w)?n="right":o<-S&&(n="left"))}return w=e,b=t,n}(("touchmove"===e.type?e.touches[0]:e).clientX,("touchmove"===e.type?e.touches[0]:e).clientY))?i++:"left"===e&&i--,x(d=((d=i*a)%360+360)%360))},j=function(e){e=Math.floor(e/a);return e<0?e=s-1:s<=e&&(e=0),e},x=function(e){for(var t=Math.floor(e/a)+1,n=1;n<=s;n++)u.querySelector("img:nth-child("+n+")").style.display=n===t?"block":"none"},w=(x(d),null),b=null,S=1;function M(e){e.preventDefault(),p=!0,document.addEventListener("mousemove",N),document.addEventListener("touchmove",N)}function N(e){var t,n,o;p&&(t=v.getBoundingClientRect(),n=f.offsetWidth,o=v.offsetWidth-n,e="touchmove"===e.type?e.touches[0].clientX-t.left-n/2:e.clientX-t.left-n/2,e=Math.max(0,Math.min(o,e)),f.style.left="".concat(e,"px"),d=Math.floor(e*(360/o)),x(d=(d%360+360)%360))}function C(){p=!1,document.removeEventListener("mousemove",N),document.removeEventListener("touchmove",N)}(v=document.createElement("div")).id="judo-scroller",v.style.cssText="\n    position: relative;\n    width: 100%;\n    height: 20px;\n    background-color: #f1f1f1;\n    margin: 20px auto;\n    border-radius: 10px;\n    cursor: pointer;",(f=document.createElement("div")).id="judo-draggable",f.style.cssText="position: absolute;\n    top: 0;\n    left: 0;\n    width: 60px;\n    height: 20px;\n    background-color: #4caf50;\n    border-radius: 20px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;",v.appendChild(f),n.appendChild(v),p=!1,f.addEventListener("mousedown",M),f.addEventListener("touchstart",M),document.addEventListener("mouseup",C),document.addEventListener("touchend",C)}var judoSpinElements=document.querySelectorAll("[data-judo-spin]");judoSpinElements.forEach(function(e){return judoSpin(e)});
\ No newline at end of file
diff --git a/dist/js/judo-spin.js b/dist/js/judo-spin.js
index 1d9b346..d655f63 100644
--- a/dist/js/judo-spin.js
+++ b/dist/js/judo-spin.js
@@ -276,12 +276,40 @@ function judoSpin(element, options) {
     return direction;
   }
 
-
+  /* Handle draggable image scroller */
   function scrollerHandler() {
-    
-    const judoScroller = document.getElementById('judo-scroller');
-    const judoDraggable = document.getElementById('judo-draggable');
 
+    /* Create Judo scroller element */
+    const judoScroller = document.createElement('div');
+    judoScroller.id = 'judo-scroller';
+    judoScroller.style.cssText = `
+    position: relative;
+    width: 100%;
+    height: 20px;
+    background-color: #f1f1f1;
+    margin: 20px auto;
+    border-radius: 10px;
+    cursor: pointer;`;
+
+    /* Create Judo draggable element */
+    const judoDraggable = document.createElement('div');
+    judoDraggable.id = 'judo-draggable';
+    judoDraggable.style.cssText = `position: absolute;
+    top: 0;
+    left: 0;
+    width: 60px;
+    height: 20px;
+    background-color: #4caf50;
+    border-radius: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;`;
+    
+    /* Append elements to respective parent nodes */
+    judoScroller.appendChild(judoDraggable);
+    judoSpinWrapper.appendChild(judoScroller);
+    
     /* Flag to track if the button is being dragged */
     let dragging = false;
 
diff --git a/dist/js/judo-spin.min.js b/dist/js/judo-spin.min.js
index d445ec2..a67f27d 100644
--- a/dist/js/judo-spin.min.js
+++ b/dist/js/judo-spin.min.js
@@ -12,4 +12,4 @@
  * @licenseMIT  https://github.com/Rodgath/judo-spin/blob/main/LICENSE
  * @demoExample https://rodgath.github.io/judo-spin/demo/
  */
-"use strict";function judoSpin(e,t){t||(r=e.dataset.judoSpin)&&(t=JSON.parse(r));var n,o,r,u=function(e){e=parseInt(e,10);return isNaN(e)?1:Math.abs(e)}((t=Object.assign({},{currImg:1,images:[]},t)).currImage)-1,i=e instanceof HTMLElement||e instanceof Node?e:document.querySelector(e),s=function(){var e;e=(t.hasOwnProperty("images")&&Array.isArray(t.images)&&0<t.images.length&&t.images.forEach(function(e){var t=document.createElement("img");t.src=e.src,t.alt=e.title,i.appendChild(t)}),i.querySelectorAll("img"));return e}().length,a=360/s,c=0<u?u*a:0,d=!1,l=document.createElement("div");(o=l).className="judo-spin-overlay",o.style.position="absolute",o.style.width="100%",o.style.height="100%",o.style.top="0",o.style.left="0",o.style.zIndex="1",i.appendChild(o),o.addEventListener("mouseover",function(){return o.style.cursor="e-resize"}),o.addEventListener("mouseout",function(){return o.style.cursor="auto"}),(r=i).classList.add("judo-spin-container"),r.style.position="relative",r.style.width="100%",r.style.height="auto",r.style.overflow="hidden";for(var m=i.getElementsByTagName("img"),v=0;v<m.length;v++)m[v].style.width="100%";e=i,(n=document.createElement("div")).classList.add("judo-spin-wrapper"),n.style.width="fit-content",n.style.margin="0 auto",e.parentNode.insertBefore(n,e),n.appendChild(e);l.addEventListener("mousedown",function(e){return y(e)}),l.addEventListener("touchstart",function(e){return y(e)});var h,f,p,y=function(e){e.preventDefault();var t="touchstart"===e.type?"touchmove":"mousemove",n="touchstart"===e.type?E:g,e=(console.log(e.type),d=!0,j(c));c=e*a,l.addEventListener(t,n)},g=(document.addEventListener("mouseup",function(){d=!1,l.removeEventListener("mousemove",g)}),document.addEventListener("touchend",function(){d=!1,l.removeEventListener("touchmove",E)}),function(e){return L(e)}),E=function(e){return L(e)},L=function(e){d&&("right"===(e=function(e,t){var n;{var o;null!==w&&null!==M&&(N<(o=e-w)?n="right":o<-N&&(n="left"))}return w=e,M=t,n}(("touchmove"===e.type?e.touches[0]:e).clientX,("touchmove"===e.type?e.touches[0]:e).clientY))?u++:"left"===e&&u--,S(c=((c=u*a)%360+360)%360))},j=function(e){e=Math.floor(e/a);return e<0?e=s-1:s<=e&&(e=0),e},S=function(e){for(var t=Math.floor(e/a)+1,n=1;n<=s;n++)i.querySelector("img:nth-child("+n+")").style.display=n===t?"block":"none"},w=(S(c),null),M=null,N=1;function I(e){e.preventDefault(),p=!0,document.addEventListener("mousemove",b),document.addEventListener("touchmove",b)}function b(e){var t,n,o;p&&(t=h.getBoundingClientRect(),n=f.offsetWidth,o=h.offsetWidth-n,e="touchmove"===e.type?e.touches[0].clientX-t.left-n/2:e.clientX-t.left-n/2,e=Math.max(0,Math.min(o,e)),f.style.left="".concat(e,"px"),c=Math.floor(e*(360/o)),S(c=(c%360+360)%360))}function B(){p=!1,document.removeEventListener("mousemove",b),document.removeEventListener("touchmove",b)}h=document.getElementById("judo-scroller"),f=document.getElementById("judo-draggable"),p=!1,f.addEventListener("mousedown",I),f.addEventListener("touchstart",I),document.addEventListener("mouseup",B),document.addEventListener("touchend",B)}var judoSpinElements=document.querySelectorAll("[data-judo-spin]");judoSpinElements.forEach(function(e){return judoSpin(e)});
\ No newline at end of file
+"use strict";function judoSpin(e,t){t||(r=e.dataset.judoSpin)&&(t=JSON.parse(r));var n,o,r,i=function(e){e=parseInt(e,10);return isNaN(e)?1:Math.abs(e)}((t=Object.assign({},{currImg:1,images:[]},t)).currImage)-1,u=e instanceof HTMLElement||e instanceof Node?e:document.querySelector(e),s=function(){var e;e=(t.hasOwnProperty("images")&&Array.isArray(t.images)&&0<t.images.length&&t.images.forEach(function(e){var t=document.createElement("img");t.src=e.src,t.alt=e.title,u.appendChild(t)}),u.querySelectorAll("img"));return e}().length,a=360/s,d=0<i?i*a:0,c=!1,l=document.createElement("div");(o=l).className="judo-spin-overlay",o.style.position="absolute",o.style.width="100%",o.style.height="100%",o.style.top="0",o.style.left="0",o.style.zIndex="1",u.appendChild(o),o.addEventListener("mouseover",function(){return o.style.cursor="e-resize"}),o.addEventListener("mouseout",function(){return o.style.cursor="auto"}),(r=u).classList.add("judo-spin-container"),r.style.position="relative",r.style.width="100%",r.style.height="auto",r.style.overflow="hidden";for(var m=u.getElementsByTagName("img"),h=0;h<m.length;h++)m[h].style.width="100%";e=u,(n=document.createElement("div")).classList.add("judo-spin-wrapper"),n.style.width="fit-content",n.style.margin="0 auto",e.parentNode.insertBefore(n,e),n.appendChild(e);l.addEventListener("mousedown",function(e){return y(e)}),l.addEventListener("touchstart",function(e){return y(e)});var v,f,p,y=function(e){e.preventDefault();var t="touchstart"===e.type?"touchmove":"mousemove",n="touchstart"===e.type?E:g,e=(console.log(e.type),c=!0,j(d));d=e*a,l.addEventListener(t,n)},g=(document.addEventListener("mouseup",function(){c=!1,l.removeEventListener("mousemove",g)}),document.addEventListener("touchend",function(){c=!1,l.removeEventListener("touchmove",E)}),function(e){return L(e)}),E=function(e){return L(e)},L=function(e){c&&("right"===(e=function(e,t){var n;{var o;null!==w&&null!==b&&(S<(o=e-w)?n="right":o<-S&&(n="left"))}return w=e,b=t,n}(("touchmove"===e.type?e.touches[0]:e).clientX,("touchmove"===e.type?e.touches[0]:e).clientY))?i++:"left"===e&&i--,x(d=((d=i*a)%360+360)%360))},j=function(e){e=Math.floor(e/a);return e<0?e=s-1:s<=e&&(e=0),e},x=function(e){for(var t=Math.floor(e/a)+1,n=1;n<=s;n++)u.querySelector("img:nth-child("+n+")").style.display=n===t?"block":"none"},w=(x(d),null),b=null,S=1;function M(e){e.preventDefault(),p=!0,document.addEventListener("mousemove",N),document.addEventListener("touchmove",N)}function N(e){var t,n,o;p&&(t=v.getBoundingClientRect(),n=f.offsetWidth,o=v.offsetWidth-n,e="touchmove"===e.type?e.touches[0].clientX-t.left-n/2:e.clientX-t.left-n/2,e=Math.max(0,Math.min(o,e)),f.style.left="".concat(e,"px"),d=Math.floor(e*(360/o)),x(d=(d%360+360)%360))}function C(){p=!1,document.removeEventListener("mousemove",N),document.removeEventListener("touchmove",N)}(v=document.createElement("div")).id="judo-scroller",v.style.cssText="\n    position: relative;\n    width: 100%;\n    height: 20px;\n    background-color: #f1f1f1;\n    margin: 20px auto;\n    border-radius: 10px;\n    cursor: pointer;",(f=document.createElement("div")).id="judo-draggable",f.style.cssText="position: absolute;\n    top: 0;\n    left: 0;\n    width: 60px;\n    height: 20px;\n    background-color: #4caf50;\n    border-radius: 20px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;",v.appendChild(f),n.appendChild(v),p=!1,f.addEventListener("mousedown",M),f.addEventListener("touchstart",M),document.addEventListener("mouseup",C),document.addEventListener("touchend",C)}var judoSpinElements=document.querySelectorAll("[data-judo-spin]");judoSpinElements.forEach(function(e){return judoSpin(e)});
\ No newline at end of file
diff --git a/src/judo-spin.js b/src/judo-spin.js
index 4480ef7..40d94f5 100644
--- a/src/judo-spin.js
+++ b/src/judo-spin.js
@@ -262,12 +262,40 @@ function judoSpin(element, options) {
     return direction;
   }
 
-
+  /* Handle draggable image scroller */
   function scrollerHandler() {
-    
-    const judoScroller = document.getElementById('judo-scroller');
-    const judoDraggable = document.getElementById('judo-draggable');
 
+    /* Create Judo scroller element */
+    const judoScroller = document.createElement('div');
+    judoScroller.id = 'judo-scroller';
+    judoScroller.style.cssText = `
+    position: relative;
+    width: 100%;
+    height: 20px;
+    background-color: #f1f1f1;
+    margin: 20px auto;
+    border-radius: 10px;
+    cursor: pointer;`;
+
+    /* Create Judo draggable element */
+    const judoDraggable = document.createElement('div');
+    judoDraggable.id = 'judo-draggable';
+    judoDraggable.style.cssText = `position: absolute;
+    top: 0;
+    left: 0;
+    width: 60px;
+    height: 20px;
+    background-color: #4caf50;
+    border-radius: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;`;
+    
+    /* Append elements to respective parent nodes */
+    judoScroller.appendChild(judoDraggable);
+    judoSpinWrapper.appendChild(judoScroller);
+    
     /* Flag to track if the button is being dragged */
     let dragging = false;
 

From 09da85bd00fa2789597945667391548e00a6b8dc Mon Sep 17 00:00:00 2001
From: Rodgath <25994782+Rodgath@users.noreply.github.com>
Date: Sat, 5 Aug 2023 06:34:53 +0300
Subject: [PATCH 4/5] Rename 'scrollerHandler' to 'draggableScroller'

---
 demo/js/judo-spin.js | 6 +++---
 dist/js/judo-spin.js | 6 +++---
 src/judo-spin.js     | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/demo/js/judo-spin.js b/demo/js/judo-spin.js
index 40d94f5..b56c4c0 100644
--- a/demo/js/judo-spin.js
+++ b/demo/js/judo-spin.js
@@ -262,8 +262,8 @@ function judoSpin(element, options) {
     return direction;
   }
 
-  /* Handle draggable image scroller */
-  function scrollerHandler() {
+  /* Handle draggable scroller */
+  function draggableScroller() {
 
     /* Create Judo scroller element */
     const judoScroller = document.createElement('div');
@@ -360,7 +360,7 @@ function judoSpin(element, options) {
     document.addEventListener('touchend', handleDragEnd);
   }
 
-  scrollerHandler();
+  draggableScroller();
 }
 
 /* Call the function for elements with the 'data-judo-spin' attribute */
diff --git a/dist/js/judo-spin.js b/dist/js/judo-spin.js
index d655f63..de7eddf 100644
--- a/dist/js/judo-spin.js
+++ b/dist/js/judo-spin.js
@@ -276,8 +276,8 @@ function judoSpin(element, options) {
     return direction;
   }
 
-  /* Handle draggable image scroller */
-  function scrollerHandler() {
+  /* Handle draggable scroller */
+  function draggableScroller() {
 
     /* Create Judo scroller element */
     const judoScroller = document.createElement('div');
@@ -374,7 +374,7 @@ function judoSpin(element, options) {
     document.addEventListener('touchend', handleDragEnd);
   }
 
-  scrollerHandler();
+  draggableScroller();
 }
 
 /* Call the function for elements with the 'data-judo-spin' attribute */
diff --git a/src/judo-spin.js b/src/judo-spin.js
index 40d94f5..b56c4c0 100644
--- a/src/judo-spin.js
+++ b/src/judo-spin.js
@@ -262,8 +262,8 @@ function judoSpin(element, options) {
     return direction;
   }
 
-  /* Handle draggable image scroller */
-  function scrollerHandler() {
+  /* Handle draggable scroller */
+  function draggableScroller() {
 
     /* Create Judo scroller element */
     const judoScroller = document.createElement('div');
@@ -360,7 +360,7 @@ function judoSpin(element, options) {
     document.addEventListener('touchend', handleDragEnd);
   }
 
-  scrollerHandler();
+  draggableScroller();
 }
 
 /* Call the function for elements with the 'data-judo-spin' attribute */

From 6269f30f98c9df5360a861b8c3587b13b02dd8aa Mon Sep 17 00:00:00 2001
From: Rodgath <25994782+Rodgath@users.noreply.github.com>
Date: Sat, 5 Aug 2023 06:45:54 +0300
Subject: [PATCH 5/5] Make the draggable scroller 3Dish

---
 demo/js/judo-spin.js     | 24 ++++++++++++++++++++----
 demo/js/judo-spin.min.js |  2 +-
 dist/js/judo-spin.js     | 24 ++++++++++++++++++++----
 dist/js/judo-spin.min.js |  2 +-
 src/judo-spin.js         | 24 ++++++++++++++++++++----
 5 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/demo/js/judo-spin.js b/demo/js/judo-spin.js
index b56c4c0..be5488e 100644
--- a/demo/js/judo-spin.js
+++ b/demo/js/judo-spin.js
@@ -271,28 +271,44 @@ function judoSpin(element, options) {
     judoScroller.style.cssText = `
     position: relative;
     width: 100%;
-    height: 20px;
+    height: 12px;
     background-color: #f1f1f1;
     margin: 20px auto;
     border-radius: 10px;
-    cursor: pointer;`;
+    cursor: pointer;
+    box-shadow: inset 1px 1px 3px #d7d7d7;`;
 
     /* Create Judo draggable element */
     const judoDraggable = document.createElement('div');
     judoDraggable.id = 'judo-draggable';
-    judoDraggable.style.cssText = `position: absolute;
+    judoDraggable.style.cssText = `
+    position: absolute;
     top: 0;
     left: 0;
     width: 60px;
-    height: 20px;
+    height: calc(100% + 10px);
     background-color: #4caf50;
     border-radius: 20px;
     cursor: pointer;
+    transform: translateY(-5px);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.45);
     display: flex;
     align-items: center;
     justify-content: center;`;
     
+    /* Create a new element (pseudo-element) */
+    const pseudoElement = document.createElement('span');
+    pseudoElement.textContent = '| | |';
+    pseudoElement.style.cssText = `
+    color: #fff;
+    position: relative;
+    height: 10px;
+    line-height: 10px;
+    overflow: hidden;
+    text-shadow: 1px 0 2px #a8a8a8;`;
+    
     /* Append elements to respective parent nodes */
+    judoDraggable.appendChild(pseudoElement);
     judoScroller.appendChild(judoDraggable);
     judoSpinWrapper.appendChild(judoScroller);
     
diff --git a/demo/js/judo-spin.min.js b/demo/js/judo-spin.min.js
index f7ab9d8..4bfdaf5 100644
--- a/demo/js/judo-spin.min.js
+++ b/demo/js/judo-spin.min.js
@@ -1 +1 @@
-"use strict";function judoSpin(e,t){t||(r=e.dataset.judoSpin)&&(t=JSON.parse(r));var n,o,r,i=function(e){e=parseInt(e,10);return isNaN(e)?1:Math.abs(e)}((t=Object.assign({},{currImg:1,images:[]},t)).currImage)-1,u=e instanceof HTMLElement||e instanceof Node?e:document.querySelector(e),s=function(){var e;e=(t.hasOwnProperty("images")&&Array.isArray(t.images)&&0<t.images.length&&t.images.forEach(function(e){var t=document.createElement("img");t.src=e.src,t.alt=e.title,u.appendChild(t)}),u.querySelectorAll("img"));return e}().length,a=360/s,d=0<i?i*a:0,c=!1,l=document.createElement("div");(o=l).className="judo-spin-overlay",o.style.position="absolute",o.style.width="100%",o.style.height="100%",o.style.top="0",o.style.left="0",o.style.zIndex="1",u.appendChild(o),o.addEventListener("mouseover",function(){return o.style.cursor="e-resize"}),o.addEventListener("mouseout",function(){return o.style.cursor="auto"}),(r=u).classList.add("judo-spin-container"),r.style.position="relative",r.style.width="100%",r.style.height="auto",r.style.overflow="hidden";for(var m=u.getElementsByTagName("img"),h=0;h<m.length;h++)m[h].style.width="100%";e=u,(n=document.createElement("div")).classList.add("judo-spin-wrapper"),n.style.width="fit-content",n.style.margin="0 auto",e.parentNode.insertBefore(n,e),n.appendChild(e);l.addEventListener("mousedown",function(e){return y(e)}),l.addEventListener("touchstart",function(e){return y(e)});var v,f,p,y=function(e){e.preventDefault();var t="touchstart"===e.type?"touchmove":"mousemove",n="touchstart"===e.type?E:g,e=(console.log(e.type),c=!0,j(d));d=e*a,l.addEventListener(t,n)},g=(document.addEventListener("mouseup",function(){c=!1,l.removeEventListener("mousemove",g)}),document.addEventListener("touchend",function(){c=!1,l.removeEventListener("touchmove",E)}),function(e){return L(e)}),E=function(e){return L(e)},L=function(e){c&&("right"===(e=function(e,t){var n;{var o;null!==w&&null!==b&&(S<(o=e-w)?n="right":o<-S&&(n="left"))}return w=e,b=t,n}(("touchmove"===e.type?e.touches[0]:e).clientX,("touchmove"===e.type?e.touches[0]:e).clientY))?i++:"left"===e&&i--,x(d=((d=i*a)%360+360)%360))},j=function(e){e=Math.floor(e/a);return e<0?e=s-1:s<=e&&(e=0),e},x=function(e){for(var t=Math.floor(e/a)+1,n=1;n<=s;n++)u.querySelector("img:nth-child("+n+")").style.display=n===t?"block":"none"},w=(x(d),null),b=null,S=1;function M(e){e.preventDefault(),p=!0,document.addEventListener("mousemove",N),document.addEventListener("touchmove",N)}function N(e){var t,n,o;p&&(t=v.getBoundingClientRect(),n=f.offsetWidth,o=v.offsetWidth-n,e="touchmove"===e.type?e.touches[0].clientX-t.left-n/2:e.clientX-t.left-n/2,e=Math.max(0,Math.min(o,e)),f.style.left="".concat(e,"px"),d=Math.floor(e*(360/o)),x(d=(d%360+360)%360))}function C(){p=!1,document.removeEventListener("mousemove",N),document.removeEventListener("touchmove",N)}(v=document.createElement("div")).id="judo-scroller",v.style.cssText="\n    position: relative;\n    width: 100%;\n    height: 20px;\n    background-color: #f1f1f1;\n    margin: 20px auto;\n    border-radius: 10px;\n    cursor: pointer;",(f=document.createElement("div")).id="judo-draggable",f.style.cssText="position: absolute;\n    top: 0;\n    left: 0;\n    width: 60px;\n    height: 20px;\n    background-color: #4caf50;\n    border-radius: 20px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;",v.appendChild(f),n.appendChild(v),p=!1,f.addEventListener("mousedown",M),f.addEventListener("touchstart",M),document.addEventListener("mouseup",C),document.addEventListener("touchend",C)}var judoSpinElements=document.querySelectorAll("[data-judo-spin]");judoSpinElements.forEach(function(e){return judoSpin(e)});
\ No newline at end of file
+"use strict";function judoSpin(e,t){t||(r=e.dataset.judoSpin)&&(t=JSON.parse(r));var n,o,r,i=function(e){e=parseInt(e,10);return isNaN(e)?1:Math.abs(e)}((t=Object.assign({},{currImg:1,images:[]},t)).currImage)-1,s=e instanceof HTMLElement||e instanceof Node?e:document.querySelector(e),a=function(){var e;e=(t.hasOwnProperty("images")&&Array.isArray(t.images)&&0<t.images.length&&t.images.forEach(function(e){var t=document.createElement("img");t.src=e.src,t.alt=e.title,s.appendChild(t)}),s.querySelectorAll("img"));return e}().length,u=360/a,d=0<i?i*u:0,c=!1,l=document.createElement("div");(o=l).className="judo-spin-overlay",o.style.position="absolute",o.style.width="100%",o.style.height="100%",o.style.top="0",o.style.left="0",o.style.zIndex="1",s.appendChild(o),o.addEventListener("mouseover",function(){return o.style.cursor="e-resize"}),o.addEventListener("mouseout",function(){return o.style.cursor="auto"}),(r=s).classList.add("judo-spin-container"),r.style.position="relative",r.style.width="100%",r.style.height="auto",r.style.overflow="hidden";for(var m=s.getElementsByTagName("img"),p=0;p<m.length;p++)m[p].style.width="100%";e=s,(n=document.createElement("div")).classList.add("judo-spin-wrapper"),n.style.width="fit-content",n.style.margin="0 auto",e.parentNode.insertBefore(n,e),n.appendChild(e);l.addEventListener("mousedown",function(e){return y(e)}),l.addEventListener("touchstart",function(e){return y(e)});var h,f,v,y=function(e){e.preventDefault();var t="touchstart"===e.type?"touchmove":"mousemove",n="touchstart"===e.type?E:g,e=(console.log(e.type),c=!0,L(d));d=e*u,l.addEventListener(t,n)},g=(document.addEventListener("mouseup",function(){c=!1,l.removeEventListener("mousemove",g)}),document.addEventListener("touchend",function(){c=!1,l.removeEventListener("touchmove",E)}),function(e){return x(e)}),E=function(e){return x(e)},x=function(e){c&&("right"===(e=function(e,t){var n;{var o;null!==b&&null!==j&&(S<(o=e-b)?n="right":o<-S&&(n="left"))}return b=e,j=t,n}(("touchmove"===e.type?e.touches[0]:e).clientX,("touchmove"===e.type?e.touches[0]:e).clientY))?i++:"left"===e&&i--,w(d=((d=i*u)%360+360)%360))},L=function(e){e=Math.floor(e/u);return e<0?e=a-1:a<=e&&(e=0),e},w=function(e){for(var t=Math.floor(e/u)+1,n=1;n<=a;n++)s.querySelector("img:nth-child("+n+")").style.display=n===t?"block":"none"},b=(w(d),null),j=null,S=1;function C(e){e.preventDefault(),v=!0,document.addEventListener("mousemove",M),document.addEventListener("touchmove",M)}function M(e){var t,n,o;v&&(t=h.getBoundingClientRect(),n=f.offsetWidth,o=h.offsetWidth-n,e="touchmove"===e.type?e.touches[0].clientX-t.left-n/2:e.clientX-t.left-n/2,e=Math.max(0,Math.min(o,e)),f.style.left="".concat(e,"px"),d=Math.floor(e*(360/o)),w(d=(d%360+360)%360))}function N(){v=!1,document.removeEventListener("mousemove",M),document.removeEventListener("touchmove",M)}(h=document.createElement("div")).id="judo-scroller",h.style.cssText="\n    position: relative;\n    width: 100%;\n    height: 12px;\n    background-color: #f1f1f1;\n    margin: 20px auto;\n    border-radius: 10px;\n    cursor: pointer;\n    box-shadow: inset 1px 1px 3px #d7d7d7;",(f=document.createElement("div")).id="judo-draggable",f.style.cssText="\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 60px;\n    height: calc(100% + 10px);\n    background-color: #4caf50;\n    border-radius: 20px;\n    cursor: pointer;\n    transform: translateY(-5px);\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.45);\n    display: flex;\n    align-items: center;\n    justify-content: center;",(e=document.createElement("span")).textContent="| | |",e.style.cssText="\n    color: #fff;\n    position: relative;\n    height: 10px;\n    line-height: 10px;\n    overflow: hidden;\n    text-shadow: 1px 0 2px #a8a8a8;",f.appendChild(e),h.appendChild(f),n.appendChild(h),v=!1,f.addEventListener("mousedown",C),f.addEventListener("touchstart",C),document.addEventListener("mouseup",N),document.addEventListener("touchend",N)}var judoSpinElements=document.querySelectorAll("[data-judo-spin]");judoSpinElements.forEach(function(e){return judoSpin(e)});
\ No newline at end of file
diff --git a/dist/js/judo-spin.js b/dist/js/judo-spin.js
index de7eddf..6686fc3 100644
--- a/dist/js/judo-spin.js
+++ b/dist/js/judo-spin.js
@@ -285,28 +285,44 @@ function judoSpin(element, options) {
     judoScroller.style.cssText = `
     position: relative;
     width: 100%;
-    height: 20px;
+    height: 12px;
     background-color: #f1f1f1;
     margin: 20px auto;
     border-radius: 10px;
-    cursor: pointer;`;
+    cursor: pointer;
+    box-shadow: inset 1px 1px 3px #d7d7d7;`;
 
     /* Create Judo draggable element */
     const judoDraggable = document.createElement('div');
     judoDraggable.id = 'judo-draggable';
-    judoDraggable.style.cssText = `position: absolute;
+    judoDraggable.style.cssText = `
+    position: absolute;
     top: 0;
     left: 0;
     width: 60px;
-    height: 20px;
+    height: calc(100% + 10px);
     background-color: #4caf50;
     border-radius: 20px;
     cursor: pointer;
+    transform: translateY(-5px);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.45);
     display: flex;
     align-items: center;
     justify-content: center;`;
     
+    /* Create a new element (pseudo-element) */
+    const pseudoElement = document.createElement('span');
+    pseudoElement.textContent = '| | |';
+    pseudoElement.style.cssText = `
+    color: #fff;
+    position: relative;
+    height: 10px;
+    line-height: 10px;
+    overflow: hidden;
+    text-shadow: 1px 0 2px #a8a8a8;`;
+    
     /* Append elements to respective parent nodes */
+    judoDraggable.appendChild(pseudoElement);
     judoScroller.appendChild(judoDraggable);
     judoSpinWrapper.appendChild(judoScroller);
     
diff --git a/dist/js/judo-spin.min.js b/dist/js/judo-spin.min.js
index a67f27d..33e419e 100644
--- a/dist/js/judo-spin.min.js
+++ b/dist/js/judo-spin.min.js
@@ -12,4 +12,4 @@
  * @licenseMIT  https://github.com/Rodgath/judo-spin/blob/main/LICENSE
  * @demoExample https://rodgath.github.io/judo-spin/demo/
  */
-"use strict";function judoSpin(e,t){t||(r=e.dataset.judoSpin)&&(t=JSON.parse(r));var n,o,r,i=function(e){e=parseInt(e,10);return isNaN(e)?1:Math.abs(e)}((t=Object.assign({},{currImg:1,images:[]},t)).currImage)-1,u=e instanceof HTMLElement||e instanceof Node?e:document.querySelector(e),s=function(){var e;e=(t.hasOwnProperty("images")&&Array.isArray(t.images)&&0<t.images.length&&t.images.forEach(function(e){var t=document.createElement("img");t.src=e.src,t.alt=e.title,u.appendChild(t)}),u.querySelectorAll("img"));return e}().length,a=360/s,d=0<i?i*a:0,c=!1,l=document.createElement("div");(o=l).className="judo-spin-overlay",o.style.position="absolute",o.style.width="100%",o.style.height="100%",o.style.top="0",o.style.left="0",o.style.zIndex="1",u.appendChild(o),o.addEventListener("mouseover",function(){return o.style.cursor="e-resize"}),o.addEventListener("mouseout",function(){return o.style.cursor="auto"}),(r=u).classList.add("judo-spin-container"),r.style.position="relative",r.style.width="100%",r.style.height="auto",r.style.overflow="hidden";for(var m=u.getElementsByTagName("img"),h=0;h<m.length;h++)m[h].style.width="100%";e=u,(n=document.createElement("div")).classList.add("judo-spin-wrapper"),n.style.width="fit-content",n.style.margin="0 auto",e.parentNode.insertBefore(n,e),n.appendChild(e);l.addEventListener("mousedown",function(e){return y(e)}),l.addEventListener("touchstart",function(e){return y(e)});var v,f,p,y=function(e){e.preventDefault();var t="touchstart"===e.type?"touchmove":"mousemove",n="touchstart"===e.type?E:g,e=(console.log(e.type),c=!0,j(d));d=e*a,l.addEventListener(t,n)},g=(document.addEventListener("mouseup",function(){c=!1,l.removeEventListener("mousemove",g)}),document.addEventListener("touchend",function(){c=!1,l.removeEventListener("touchmove",E)}),function(e){return L(e)}),E=function(e){return L(e)},L=function(e){c&&("right"===(e=function(e,t){var n;{var o;null!==w&&null!==b&&(S<(o=e-w)?n="right":o<-S&&(n="left"))}return w=e,b=t,n}(("touchmove"===e.type?e.touches[0]:e).clientX,("touchmove"===e.type?e.touches[0]:e).clientY))?i++:"left"===e&&i--,x(d=((d=i*a)%360+360)%360))},j=function(e){e=Math.floor(e/a);return e<0?e=s-1:s<=e&&(e=0),e},x=function(e){for(var t=Math.floor(e/a)+1,n=1;n<=s;n++)u.querySelector("img:nth-child("+n+")").style.display=n===t?"block":"none"},w=(x(d),null),b=null,S=1;function M(e){e.preventDefault(),p=!0,document.addEventListener("mousemove",N),document.addEventListener("touchmove",N)}function N(e){var t,n,o;p&&(t=v.getBoundingClientRect(),n=f.offsetWidth,o=v.offsetWidth-n,e="touchmove"===e.type?e.touches[0].clientX-t.left-n/2:e.clientX-t.left-n/2,e=Math.max(0,Math.min(o,e)),f.style.left="".concat(e,"px"),d=Math.floor(e*(360/o)),x(d=(d%360+360)%360))}function C(){p=!1,document.removeEventListener("mousemove",N),document.removeEventListener("touchmove",N)}(v=document.createElement("div")).id="judo-scroller",v.style.cssText="\n    position: relative;\n    width: 100%;\n    height: 20px;\n    background-color: #f1f1f1;\n    margin: 20px auto;\n    border-radius: 10px;\n    cursor: pointer;",(f=document.createElement("div")).id="judo-draggable",f.style.cssText="position: absolute;\n    top: 0;\n    left: 0;\n    width: 60px;\n    height: 20px;\n    background-color: #4caf50;\n    border-radius: 20px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;",v.appendChild(f),n.appendChild(v),p=!1,f.addEventListener("mousedown",M),f.addEventListener("touchstart",M),document.addEventListener("mouseup",C),document.addEventListener("touchend",C)}var judoSpinElements=document.querySelectorAll("[data-judo-spin]");judoSpinElements.forEach(function(e){return judoSpin(e)});
\ No newline at end of file
+"use strict";function judoSpin(e,t){t||(r=e.dataset.judoSpin)&&(t=JSON.parse(r));var n,o,r,i=function(e){e=parseInt(e,10);return isNaN(e)?1:Math.abs(e)}((t=Object.assign({},{currImg:1,images:[]},t)).currImage)-1,s=e instanceof HTMLElement||e instanceof Node?e:document.querySelector(e),a=function(){var e;e=(t.hasOwnProperty("images")&&Array.isArray(t.images)&&0<t.images.length&&t.images.forEach(function(e){var t=document.createElement("img");t.src=e.src,t.alt=e.title,s.appendChild(t)}),s.querySelectorAll("img"));return e}().length,u=360/a,d=0<i?i*u:0,c=!1,l=document.createElement("div");(o=l).className="judo-spin-overlay",o.style.position="absolute",o.style.width="100%",o.style.height="100%",o.style.top="0",o.style.left="0",o.style.zIndex="1",s.appendChild(o),o.addEventListener("mouseover",function(){return o.style.cursor="e-resize"}),o.addEventListener("mouseout",function(){return o.style.cursor="auto"}),(r=s).classList.add("judo-spin-container"),r.style.position="relative",r.style.width="100%",r.style.height="auto",r.style.overflow="hidden";for(var m=s.getElementsByTagName("img"),p=0;p<m.length;p++)m[p].style.width="100%";e=s,(n=document.createElement("div")).classList.add("judo-spin-wrapper"),n.style.width="fit-content",n.style.margin="0 auto",e.parentNode.insertBefore(n,e),n.appendChild(e);l.addEventListener("mousedown",function(e){return y(e)}),l.addEventListener("touchstart",function(e){return y(e)});var h,f,v,y=function(e){e.preventDefault();var t="touchstart"===e.type?"touchmove":"mousemove",n="touchstart"===e.type?E:g,e=(console.log(e.type),c=!0,L(d));d=e*u,l.addEventListener(t,n)},g=(document.addEventListener("mouseup",function(){c=!1,l.removeEventListener("mousemove",g)}),document.addEventListener("touchend",function(){c=!1,l.removeEventListener("touchmove",E)}),function(e){return x(e)}),E=function(e){return x(e)},x=function(e){c&&("right"===(e=function(e,t){var n;{var o;null!==b&&null!==j&&(S<(o=e-b)?n="right":o<-S&&(n="left"))}return b=e,j=t,n}(("touchmove"===e.type?e.touches[0]:e).clientX,("touchmove"===e.type?e.touches[0]:e).clientY))?i++:"left"===e&&i--,w(d=((d=i*u)%360+360)%360))},L=function(e){e=Math.floor(e/u);return e<0?e=a-1:a<=e&&(e=0),e},w=function(e){for(var t=Math.floor(e/u)+1,n=1;n<=a;n++)s.querySelector("img:nth-child("+n+")").style.display=n===t?"block":"none"},b=(w(d),null),j=null,S=1;function C(e){e.preventDefault(),v=!0,document.addEventListener("mousemove",M),document.addEventListener("touchmove",M)}function M(e){var t,n,o;v&&(t=h.getBoundingClientRect(),n=f.offsetWidth,o=h.offsetWidth-n,e="touchmove"===e.type?e.touches[0].clientX-t.left-n/2:e.clientX-t.left-n/2,e=Math.max(0,Math.min(o,e)),f.style.left="".concat(e,"px"),d=Math.floor(e*(360/o)),w(d=(d%360+360)%360))}function N(){v=!1,document.removeEventListener("mousemove",M),document.removeEventListener("touchmove",M)}(h=document.createElement("div")).id="judo-scroller",h.style.cssText="\n    position: relative;\n    width: 100%;\n    height: 12px;\n    background-color: #f1f1f1;\n    margin: 20px auto;\n    border-radius: 10px;\n    cursor: pointer;\n    box-shadow: inset 1px 1px 3px #d7d7d7;",(f=document.createElement("div")).id="judo-draggable",f.style.cssText="\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 60px;\n    height: calc(100% + 10px);\n    background-color: #4caf50;\n    border-radius: 20px;\n    cursor: pointer;\n    transform: translateY(-5px);\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.45);\n    display: flex;\n    align-items: center;\n    justify-content: center;",(e=document.createElement("span")).textContent="| | |",e.style.cssText="\n    color: #fff;\n    position: relative;\n    height: 10px;\n    line-height: 10px;\n    overflow: hidden;\n    text-shadow: 1px 0 2px #a8a8a8;",f.appendChild(e),h.appendChild(f),n.appendChild(h),v=!1,f.addEventListener("mousedown",C),f.addEventListener("touchstart",C),document.addEventListener("mouseup",N),document.addEventListener("touchend",N)}var judoSpinElements=document.querySelectorAll("[data-judo-spin]");judoSpinElements.forEach(function(e){return judoSpin(e)});
\ No newline at end of file
diff --git a/src/judo-spin.js b/src/judo-spin.js
index b56c4c0..be5488e 100644
--- a/src/judo-spin.js
+++ b/src/judo-spin.js
@@ -271,28 +271,44 @@ function judoSpin(element, options) {
     judoScroller.style.cssText = `
     position: relative;
     width: 100%;
-    height: 20px;
+    height: 12px;
     background-color: #f1f1f1;
     margin: 20px auto;
     border-radius: 10px;
-    cursor: pointer;`;
+    cursor: pointer;
+    box-shadow: inset 1px 1px 3px #d7d7d7;`;
 
     /* Create Judo draggable element */
     const judoDraggable = document.createElement('div');
     judoDraggable.id = 'judo-draggable';
-    judoDraggable.style.cssText = `position: absolute;
+    judoDraggable.style.cssText = `
+    position: absolute;
     top: 0;
     left: 0;
     width: 60px;
-    height: 20px;
+    height: calc(100% + 10px);
     background-color: #4caf50;
     border-radius: 20px;
     cursor: pointer;
+    transform: translateY(-5px);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.45);
     display: flex;
     align-items: center;
     justify-content: center;`;
     
+    /* Create a new element (pseudo-element) */
+    const pseudoElement = document.createElement('span');
+    pseudoElement.textContent = '| | |';
+    pseudoElement.style.cssText = `
+    color: #fff;
+    position: relative;
+    height: 10px;
+    line-height: 10px;
+    overflow: hidden;
+    text-shadow: 1px 0 2px #a8a8a8;`;
+    
     /* Append elements to respective parent nodes */
+    judoDraggable.appendChild(pseudoElement);
     judoScroller.appendChild(judoDraggable);
     judoSpinWrapper.appendChild(judoScroller);