Function enable_image_compare

static/components.js:36–54

()

// which will set the minimum, maximum, & starting value of the slider. They
// default to 7%, 93%, and 50% respectively.
function enable_image_compare() {
  const image_compares = document.querySelectorAll("div.image-compare");
  for (const img_cmp of image_compares) {
    // insert the input only when js is running
    let style = window.getComputedStyle(img_cmp);
    const slider = document.createElement('input');
    slider.type = "range";
    slider.step = 0.1;
    slider.min = style.getPropertyValue('--slider-min').replace('%', '');
    slider.max = style.getPropertyValue('--slider-max').replace('%', '');
    slider.value = style.getPropertyValue('--slider-value').replace('%', '');
    slider.ariaLabel = `Slider to compare "${img_cmp.getAttribute('data-title-a')}" and "${img_cmp.getAttribute('data-title-b')}"`
    img_cmp.appendChild(slider);
    // setup callback
    slider.addEventListener("input", (event) => {
      img_cmp.style.setProperty('--slider-value', clamp(slider.value, slider.min, slider.max) + "%");
    });
  }
}

export { enable_image_compare };