<img style="filter: grayscale(var(--value, 100%));" data-type="%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">

<img style="filter: sepia(var(--value, 100%)" data-type="%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">

<img style="filter: saturate(var(--value, 5))" data-type="float" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">

<img style="filter: hue-rotate(var(--value, 360deg))" data-type="angle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">

<img style="filter: invert(var(--value, 100%))" data-type="%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">

<img style="filter: opacity(var(--value, 100%))" data-type="%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">

<img style="filter: brightness(var(--value, 5))" data-type="float" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">

<img style="filter: contrast(var(--value, 5))" data-type="float" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">

<img style="filter: blur(var(--value, 1rem))" data-type="px" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 1rem;
  padding: 1rem;
  margin: 0;
  background: black;
}

.card {
  position: relative;
  padding: 1rem;
  background: #eee;
  border-radius: 8px;
}

input {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
}

img {
  max-width: 100%;
  border-radius: 4px;
}

function wrap(el) {
  const wrapper = document.createElement("div");
  wrapper.classList.add("card");

  let max;

  if (el.dataset.type === "%") {
    max = 100;
  } else if (el.dataset.type === "angle") {
    max = 360;
  } else if (el.dataset.type === "px") {
    max = 20;
  } else {
    max = 4;
  }
  wrapper.insertAdjacentHTML(
    "beforeEnd",
    `<input type='range' min="0" max="${max}" value="100">`
  );

  el.parentNode.insertBefore(wrapper, el);
  wrapper.appendChild(el);
  wrapper.insertAdjacentHTML(
    "beforeEnd",
    `<pre class='output'>{
  ${el.getAttribute("style")}
}</pre>`
  );

  return wrapper;
}

const imgs = document.querySelectorAll("img");

imgs.forEach((img) => {
  const wrapper = wrap(img);

  let range = wrapper.querySelector("input");
  range.addEventListener("input", (e) => {
    let newValue;

    if (img.dataset.type === "%") {
      newValue = e.target.value + "%";
    } else if (img.dataset.type === "angle") {
      newValue = e.target.value + "deg";
    } else if (img.dataset.type === "px") {
      newValue = e.target.value + "px";
    } else {
      newValue = e.target.value;
    }

    img.style.setProperty("--value", newValue);
    const output = wrapper.querySelector(".output");
    output.innerHTML = `{
  ${img.getAttribute("style")}
}`;
  });
});