jquery - Change brightness of Image with value from input range slider -

i using fabricjs. when working image on canvas want increase, decrease brightness of image. use checkbox select brightness effect show brightness range selector user can select value of brightness applied on image. when click checkbox brightness of image increase, increase in slider increase brightness after increase, change slider downwards decrease brightness, image not changing brightness decrease , turns white...

html code:

<input type="checkbox" id="image-bright" unchecked> brightness <br /> <div class="brightvalue" style="display:none;"> value: <input type="range" id="bright-value" value="0" min="0" max="255" step="1" class="span22"> </div> 

js:

var imagebright=document.getelementbyid("image-bright");     imagebright&&(imagebright.onclick=function(){     if(this.checked){         $('.brightvalue').show();         var cimg=canvas.getactiveobject();         cimg&&"image"===cimg.type&&(         cimg.filters.push(new fabric.image.filters.brightness({brightness: parseint($('#bright-value').value, 10)})),         cimg.applyfilters(canvas.renderall.bind(canvas)));      }      else {         $('.brightvalue').hide();            }     });      var brightvalue=document.getelementbyid("bright-value");     brightvalue.onchange = function(){         var cimg=canvas.getactiveobject();           cimg.filters.push(new fabric.image.filters.brightness({brightness: parseint(this.value, 10)}));         cimg.applyfilters(canvas.renderall.bind(canvas));     }; 

once increase brightness, afterwards decrease of brightness value in slider, not decreasing brightness of image. when uncheck, check brightness checkbox increases brightness every time. upon uncheck brightness checkbox want turn off brightness effect i.e. no brightness effect on image. pls guide me change code.

you're pushing new filter onto object on every change.

that's why multiply, resulting in higher , higher brightness.

change this:

cimg.filters.push(new fabric.image.filters.brightness({brightness: parseint(this.value, 10)})); 

to this:

cimg.filters[0].brightness = parseint(this.value, 10);