Animation Slider

HTML

<img id="image0" src="https://placehold.co/320x240?text=Frame%201">
<input type="range" data-target="image0" value="0" min="0" max="2">

<img id="image1" src="https://placehold.co/320x240?text=Frame%201">
<input type="range" data-target="image1" value="0" min="0" max="4">

JavaScript

const images = [
  [
    'https://placehold.co/320x240?text=Frame%201',
    'https://placehold.co/320x240?text=Frame%202',
    'https://placehold.co/320x240?text=Frame%203',
  ],
  [
    'https://placehold.co/320x240?text=Frame%201',
    'https://placehold.co/320x240?text=Frame%202',
    'https://placehold.co/320x240?text=Frame%203',
    'https://placehold.co/320x240?text=Frame%204',
    'https://placehold.co/320x240?text=Frame%205',
  ]
];

images.forEach(frames => {
  frames.forEach(frame => {
    new Image(frame);
  })
});

const sliders = document.querySelectorAll('input[type="range"]'); 

sliders.forEach((slider, index) => {
  slider.oninput = function() {
    const image = document.getElementById(this.dataset.target);
    image.src = images[index][this.valueAsNumber]
  }
});