I am trying to write a web page which can do some edit to a photo ,like brightness . And I choose a library called Caman.js to achieve my goal .But when I edit the brightness of the photo with this.brightness(...).render() ,I find that the picture could not return to its original state,it will become pure white or black , It seems that the picture has lost a lot of information .

And I find a tutorial on youtube ,and it have the same problem (https://codepen.io/bradtraversy/pen/qoJZBy ). But the example on the official website( http://camanjs.com/examples/ ) is good ,want to know how to do that .

<input type="range" min="0" max="20" value="10" id="slider_bright"/>

<script>
Caman("canvas",image_src,() => {
    this.render();
  })

const slider_bright = document.getElementById('slider_bright')
var pre_slider_bright_value = 20;

slider_bright.addEventListener('input',()=>{
    Caman("canvas",image_src,function () {
        if(pre_slider_bright_value<slider_bright.value*1){
            //decrease brightness 
            this.brightness(slider_bright.value*1 - pre_slider_bright_value).render();
        }else{
            //increase brightness
            this.brightness(slider_bright.value*1 - pre_slider_bright_value).render();
        }
        pre_slider_bright_value = slider_bright.value    
      })
})
</script>