Discussion on: How I made a mini filter app with Vanilla JavaScript

[Mads Stoumann]

CSS filters are awesome – and kudos for doing it in Vanilla! A small tip: You can wrap your inputs in a <form> and have a single eventListener, instead of individual eventListeners on all the inputs.

If you set the name of the property in the name-attribute:

<form id="app">
  <input type="range" name="--blur" data-suffix="px">
  <input type="range" name="--hue-rotate" data-suffix="deg">
</form>

You only need this snippet, in order to set any of the CSS Custom Properties:

app.addEventListener('input', (event) => {
  const input = event.target;
  app.style.setProperty(input.name, input.valueAsNumber + (input.dataset.suffix||''))
})

[Raquel Santos | RS-coding]

Thank you so much for your tip! :D will do that