title: Add css filters dynamicaly via jquery
body: <p>I'm trying to add several css filters dynamicaly via Jquery.</p>
  
  <p>So I have one slider for the brightness and another one for the contrast.</p>
  
  <p>I want them both to modify a single div.</p>
  
  <p>I can easily do this with one filter but I got some difficulties getting the value of both sliders and apply them on this single div.</p>
  
  <p>I tried this, but the behaviour is odd</p>
  
  <p><strong>HTML :</strong></p>
  
  <pre><code>&lt;input class="brightness" type="range" min="0" max="100" value="100"&gt;
  &lt;input class="saturation" type="range" min="0" max="100" value="100"&gt;
  &lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Jquery :</strong></p>
  
  <pre><code>$('input').change(function(){
  
      var $brightness_value = $('.brightness').val(),
          $saturation_value = $('.contrast').val(),
          $brightness_string = "brightness("+$brightness_value+"%)",
          $saturation_string = "saturate("+$saturation_value+")";
  
  
      $('div').css("-webkit-filter",$brightness_string+$saturation_string);
  });
  </code></pre>
  
  <p>Any ideas ?</p>
  
  <p>Thanks a lot !</p>