<!-- Forked: https://codepen.io/cassie-codes/pen/561304e31eb955362b8d850d7eb7500e by @Cassie Evans -->
<div class="icon__cont">
  <img class="icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/756881/icon-instagram.svg">
  <p class="filtertext">filter: invert(0) sepia(0) saturate(1) hue-rotate(0deg) brightness(5);</p>
</div>

<div class="inputs">
  <p>Invert</p>
  <input id="invert" name="invert" class="control" type="range" step="0.01" min="0" max="0.4" value="0">
  <p>Sepia</p>
  <input id="sepia" name="sepia" class="control" type="range" step="0.5" min="0" max="1" value="0">
  <p>Saturate</p>
  <input id="saturate" name="saturate" class="control" type="range" step="0.1" min="1" max="4" value="1">
  <p>Hue Rotate</p>
  <input id="hueRotate" name="hueRotate" class="control" type="range" step="0.01" min="0" max="1" value="0">
  <p>Brightness</p>
  <input id="brightness" name="brightness" class="control" type="range" step="0.01" min="0.5" max="1.2" value="1">
</div>

@import url('https://fonts.googleapis.com/css?family=Fjalla+One');

:root {
  --invert: 0;
  --sepia: 0;
  --saturate: 1;
  --hueRotate: 0turn;
  --brightness: 1;
}
body {
  background-color: #25333A;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: space-around;
  color: #ffffff;
  font-family: 'Fjalla One', sans-serif;
}
.filtertext {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
}
.icon__cont {
  width: 50vw;
  text-align: center;
}
.icon {
  filter: invert(var(--invert)) 
          sepia(var(--sepia)) 
          saturate(var(--saturate))
          hue-rotate(var(--hueRotate))
          brightness(var(--brightness));
  min-width: 100px;
}

const icon = document.querySelector('.icon');
const filtertext = document.querySelector('.filtertext')
const inputs = document.querySelectorAll('input');

inputs.forEach (input => {
  input.addEventListener('change', handleUpdate);
  input.addEventListener('mousemove', handleUpdate);
});

function handleUpdate(e) {
  var filter = window.getComputedStyle(icon).getPropertyValue("filter")
  filtertext.textContent = "filter: " + filter + ";";
  if (this.id === 'invert') {
    icon.style.setProperty("--invert", this.value)
  } else if (this.id === 'sepia') {
    icon.style.setProperty("--sepia", this.value)
  } else if (this.id === 'saturate') {
    icon.style.setProperty("--saturate", this.value)
  } else if (this.id === 'hueRotate'){
    icon.style.setProperty("--hueRotate", this.value + "turn")
  } else if (this.id === 'brightness'){
    icon.style.setProperty("--brightness", this.value)
  }
}