title: Apply multiple css filters dynamically
body: <p>Let's say I want to apply a series of CSS filters to an image. Here's my image:</p>
  
  <pre><code>var img = document.getElementById("my_image.png");
  </code></pre>
  
  <p>And here are the <code>&lt;input type="range"&gt;</code> sliders that applies the filters:</p>
  
  <pre><code>var slider1 = document.getElementById("slider1");
  var slider2 = document.getElementById("slider2");
  </code></pre>
  
  <p>I add an event listener to each:</p>
  
  <pre><code>slider1.addEventListener("input", function(){
      img.style.filter = ( "sepia(" + this.value + ")" );
  });
  slider2.addEventListener("input", function(){
      img.style.filter = ( "blur(" + this.value + "px)" );
  });
  </code></pre>
  
  <p>When I move the second slider it's going to erase the filter property of the first. But if I <code>+=</code> the filter properties, it's going to add to the <code>img.style.filter</code> string every single step of the slider. If I use a "change" event listener, the user isn't going to get the benefit of the live "preview" of the filter effect. (And if a user comes back to the slider for a second go, it's going to result in an erroneous <code>img.style.filter</code> property).</p>
  
  <p>So what's the best javascript-only (no jquery) way of only updating the relevant part of the <code>img.style.filter</code> property when the relevant slider is manipulated while retaining the live rendering effect?</p>