Слайдер сравнения изображений, написанный на Javascript, не работает в Firefox

Question

Я пытаюсь использовать инструмент сравнения изображений из https://paulbrowne.xyz/image-comparison-slider, написанный на Javascript на веб-странице для клиента.Он отлично работает в Chrome и Safari, но, похоже, не в Firefox.Пользователь не может перетащить ползунок.Код выглядит следующим образом:

(function(){var elsH=document.querySelectorAll(".image-spliter .mover");var i=elsH.length;while(i--){var moverWidth=elsH[i].getBoundingClientRect().width;var imgLeft=elsH[i].nextElementSibling;var width=imgLeft.getBoundingClientRect().width;var height=imgLeft.getBoundingClientRect().height;elsH[i].style.left=width/2-moverWidth/2+'px';imgLeft.style.clip="rect(0px, "+width/2+"px, 999px, 0px)";var mouseDownX=0;var X;elsH[i].addEventListener("mousedown",function(e){X=e.clientX;mouseDownX=1;});elsH[i].addEventListener("mouseup",function(e){mouseDownX=0;});elsH[i].addEventListener("mouseout",function(e){mouseDownX=0;});elsH[i].addEventListener("touchstart",function(e){X=e.touches[0].clientX;mouseDownX=1;});elsH[i].addEventListener("touchend",function(e){mouseDownX=0;});elsH[i].addEventListener("mousemove",function(e){if(mouseDownX){this.style.left=parseInt(this.style.left)+(event.clientX-X)+"px";X=event.clientX;this.nextElementSibling.style.clip="rect(0px, "+(this.getBoundingClientRect().width/2+parseInt(this.style.left))+"px, "+this.getBoundingClientRect().height+"px, 0px)";}});elsH[i].addEventListener("touchmove",function(e){if(mouseDownX){this.style.left=parseInt(this.style.left)+(e.touches[0].clientX-X)+"px";X=e.touches[0].clientX;this.nextElementSibling.style.clip="rect(0px, "+(this.getBoundingClientRect().width/2+parseInt(this.style.left))+"px, "+this.getBoundingClientRect().height+"px, 0px)";}});}
window.addEventListener("resize",function(f){var elsHre=document.querySelectorAll(".image-spliter .mover");var ii=elsHre.length;while(ii--){var moverWidth=elsHre[ii].getBoundingClientRect().width;var imgLeft=elsHre[ii].nextElementSibling;var width=imgLeft.getBoundingClientRect().width;var height=imgLeft.getBoundingClientRect().height;elsHre[ii].style.left=width/2-moverWidth/2+'px';imgLeft.style.clip="rect(0px, "+width/2+"px, "+height+"px, 0px)";}});})();

/* Image Comparison styles */ 
    img {
  width: 100%;
  vertical-align: middle;
}

.image-spliter,
img,
.mover {
  overflow: hidden;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.image-spliter {
  position: relative;
}

.img-left {
  position: absolute;
  top: 0;
  left:0;
}

.mover {
  position:absolute;
  width: 200px;
  height: 100%;
  top: 0;
  left:0;
  z-index: 10;
}
.mover:before,
.mover:after {
  position:absolute;
  left:50%;
  content: "";
  background: #2d96cd;
  cursor: -webkit-grab;
  cursor: grab;
    cursor:-moz-grab;
}

.mover:before {
  top: 0;
  transform:translateX(-50%);
  width: 1px;
  height: 100%;
}
.mover:after {
  top: 50%;
  transform:translate(-50%, -50%);
  width: 5px;
  height: 33%;
  border-radius: 5px;
}

<div class="image-spliter">
                            <div class="mover"></div>
                            <img class="img-left" src="https://pictures.dealer.com/m/mcfarlandexeterfordfd/1417/2a803429c884e70e7b3d4c56aa8d9b31x.jpg" title="Before" />

                            <img class="img-right" src="https://pictures.dealer.com/m/mcfarlandexeterfordfd/1099/c77c404a9cce6b8fbc3759829e428baex.jpg" title="After" />
                            <script src="https://www.cssscript.com/demo/touch-friendly-image-comparison-slider-javascript/image-comparison-slider.js" ></script>
                        </div>

Я прошу прощения, если это легко исправить, я несколько новичок со всем этим.