Javascript 可滚动的图片与CSS&；JS

我正在尝试用“范围”输入功能更改图片。我目前只是附加初始图片，当它被更改时，我只是删除图片并用一个小动画将其他“src”附加到元素

问题是，如果你滚动太快，我想看到动画的所有图片滚动快。目前，如果你慢下来，你可以看到图片改变了它的工作方式，但是如果你快速滑动（从一个极端到另一个极端），你只能看到第一个和最后一个图片，我的理想情况是你可以看到所有图片快速滚动

这是我的HTML

<div class="face-box">
   <img id="picture" class="my-element" src="https://image.freepik.com/free-icon/interrogation-mark-circle_318-9651.jpg" />
</div>

<input id="slider" type="range" min="1" max="4" value="2" oninput="changeColor()"/>

以下是我的JSFIDLE：

如果您能给我任何帮助，或者给我其他的建议，我将不胜感激

function changeColor(){
    let val = $('#slider').val();
  
  if(val == 1){
      changeImage("https://static.thenounproject.com/png/5724-200.png")
  }
  else if(val == 2){
    changeImage("https://www.iconfinder.com/data/icons/people-125/24/icon-people-neutral-face-512.png")
  }
  else if(val == 3){
    changeImage("https://www.usacustomjackets.com/wp-content/uploads/2016/07/smiley-face.png")
  }
  else if(val == 4){
    changeImage("https://hotemoji.com/images/dl/9/grin-emoji-by-google.png")
  }
}

function changeImage(picture){
  const element = document.querySelector('.my-element');
  element.classList.add('animate__animated', 'animate__slideOutUp');
  element.style.setProperty('--animate-duration', '0.1s');
            
            
  element.addEventListener('animationend', () => {
    $('.my-element').removeClass();
    element.src = picture;
    element.classList.add('my-element', 'animate__animated', 'animate__slideInUp');
    element.style.setProperty('--animate-duration', '0.1s');
  });
}