//Made by: Juan Carlos Chavez 
//Inspired by Live Blogger's image-slider: https://www.youtube.com/watch?v=zPWVarUHFm8
const sliders = document.querySelectorAll(".image-comparison .slider");

sliders.forEach(slider => {
  const imagesContainer = slider.closest('.images-container');
  const beforeImage = imagesContainer.querySelector(".before-image");
  const sliderLine = imagesContainer.querySelector(".slider-line");
  const sliderIcon = imagesContainer.querySelector(".slider-icon");

  slider.addEventListener("input", (e) => {
    let sliderValue = e.target.value + "%";

    beforeImage.style.width = sliderValue;
    sliderLine.style.left = sliderValue;
    sliderIcon.style.left = sliderValue;
  });
});