Why does slider work on desktop but NOT on mobile?

Question

the slider feature seems to stop working on tablet and mobile devices but works fine on desktop. I'm unsure how to troubleshoot this feature.

Do I need to add "touch" for mobile devices? If so, what is the best way to add this?

I've tested it on all browsers and the the feature seems to get disabled when viewed in mobile view.

 img { max-width: 100%; } /* -------------------------------- Main components -------------------------------- */ .cd-image-container { position: relative; width: 100%; margin: 0em auto; } .cd-image-container img { display: block; } .cd-image-label { position: absolute; top: 0; right: 0; color: #000000; padding: 5px 10px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s; transition: transform 0.3s 0.7s, opacity 0.3s 0.7s; } .cd-image-label.is-hidden { visibility: hidden; } .is-visible .cd-image-label { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .cd-resize-img { position: absolute; top: 0; left: 0; width: 0; height: 100%; overflow: hidden; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; border-right:solid 1px #dedede; } .cd-resize-img img { position: absolute; left: 0; top: 0; display: block; height: 100%; width: auto; max-width: none; } .cd-resize-img .cd-image-label { right: auto; left: 0; } .is-visible .cd-resize-img { width: 50%; /* bounce in animation of the modified image */ -webkit-animation: cd-bounce-in 0.7s; -moz-animation: cd-bounce-in 0.7s; animation: cd-bounce-in 0.7s; } @-webkit-keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } @-moz-keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } @keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } .cd-handle { position: absolute; height: 22px; width: 44px; /* center the element */ left: 50%; top: 55%; margin-left: -22px; margin-top: -22px; background: #000000 url("https://images.clickfunnels.com/09/a714400d3211e7a0bd7d7140585054/cd-arrows.svg") no-repeat center center; cursor: move; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); opacity: 0; -webkit-transform: translate3d(0, 0, 0) scale(0); -moz-transform: translate3d(0, 0, 0) scale(0); -ms-transform: translate3d(0, 0, 0) scale(0); -o-transform: translate3d(0, 0, 0) scale(0); transform: translate3d(0, 0, 0) scale(0); z-index:300; } .cd-handle.draggable { /* change background color when element is active */ background-color: #3a3a3a; } .is-visible .cd-handle { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); -ms-transform: translate3d(0, 0, 0) scale(1); -o-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s; transition: transform 0.3s 0.7s, opacity 0s 0.7s; } 

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/guruscriptz/image-comparison.js"></script> <figure class="cd-image-container"> <img src="https://s3.us-east-2.amazonaws.com/audi-email-assets/damage-slider-assets/Exteroir_Unacceptable.jpg" alt="Original Image"> <span class="cd-image-label" data-type="original"><?php echo $data['lang']['unacceptable']?></span> <div class="cd-resize-img"> <!-- the resizable image on top --> <img src="https://s3.us-east-2.amazonaws.com/audi-email-assets/damage-slider-assets/Exteroir_Acceptable.jpg" alt="Modified Image"> <span class="cd-image-label" data-type="modified"><?php echo $data['lang']['acceptable']?></span> </div> <span class="cd-handle"></span> </figure> 

Answer 1

I viewed your event handling via this url: https://s3-us-west-2.amazonaws.com/guruscriptz/image-comparison.js

It appears that you are missing mobile events. You need touchstart, touchend, touchmove, and touchcancel events in addition to mouse-related events. This will allow non-mouse-based clicks to move the slider.

For example:

ragElement.parents().on("mousemove vmousemove"

should be

ragElement.parents().on("mousemove vmousemove touchmove"

etc.