<div class="container">
  <img src="https://images.unsplash.com/photo-1508671323699-6df22ecaec2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=250&q=80" id="main-image" />
  <div class="toolbox">
    <label>
      Blur
      <input id='blur' max='20' min='0' step='1' type='range' value='0'>
    </label>
    <label>
      Brightness
      <input id='brightness' max='1' min='0' step='0.1' type='range' value='1'>
    </label>
    <label>
      Contrast
      <input id='contrast' max='200' min='0' step='1' type='range' value='100'>
    </label>
    <label>
      Grayscale
      <input id='grayscale' max='100' min='0' step='1' type='range' value='0'>
    </label>
    <label>
      Hue
      <input id='hue' max='360' min='0' step='1' type='range' value='0'>
    </label>
    <label>
      Invert
      <input id='invert' max='100' min='0' step='1' type='range' value='0'>
    </label>
    <label>
      Opacity
      <input id='opacity' max='100' min='0' step='1' type='range' value='100'>
    </label>
    <label>
      Saturate
      <input id='saturate' max='200' min='0' step='1' type='range' value='100'>
    </label>
    <label>
      Sepia
      <input id='sepia' max='100' min='0' step='1' type='range' value='0'>
    </label>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root {
  --blur: 0;
  --brightness: 1;
  --contrast: 100;
  --grayscale: 0;
  --hue: 0;
  --invert: 0;
  --opacity: 100;
  --saturate: 100;
  --sepia: 0;
}
#main-image {
  transition: all 300ms ease-in-out;
  filter: blur(calc(1px * var(--blur))) brightness(var(--brightness))
    contrast(calc(1% * var(--contrast))) grayscale(calc(1% * var(--grayscale)))
    hue-rotate(calc(1deg * var(--hue))) invert(calc(1% * var(--invert)))
    opacity(calc(1% * var(--opacity))) saturate(calc(1% * var(--saturate)))
    sepia(calc(1% * var(--sepia)));
  border: 5px solid #fff;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #eee;
}
.toolbox {
  margin-left: 50px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
label {
  margin-bottom: 5px;
}

const img = document.getElementById('main-image');

const inputs = document.querySelectorAll('input');

[].forEach.call(inputs, function(input) {
  input.addEventListener('input', e => {
    img.style.setProperty('--'+input.id, input.value);
  });
});