Add css filters dynamicaly via jquery

Question

I'm trying to add several css filters dynamicaly via Jquery.

So I have one slider for the brightness and another one for the contrast.

I want them both to modify a single div.

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.

I tried this, but the behaviour is odd

HTML :

<input class="brightness" type="range" min="0" max="100" value="100">
<input class="saturation" type="range" min="0" max="100" value="100">
<div></div>

Jquery :

$('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);
});

Any ideas ?

Thanks a lot !

You have a typo: $('.brighness') is missing the t. Is that in the real code or just a copying error? — Barmar
– Barmar, Commented Feb 12, 2014 at 19:54

Karl-André Gagnon · Accepted Answer · 2014-02-12 20:20:53Z

1

You simply forgot to put the % to the value of saturate :

$saturation_string = "saturate("+$saturation_value+"%)";

http://jsfiddle.net/DYjw8/3/

answered Feb 12, 2014 at 20:20

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add css filters dynamicaly via jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related