showActions(){
    return(
        <div className="action -bar">
            <button className="Button-Edit" onClick={()=>{this.setState({clickedCrop : true})}}> Crop </button> 
            <br/> 
            Brightness : <input type="range" min="0" max="1" value={val_brightness} onChange={() => {this.handleChange}}/>  
            <br/> 
            Blur :<input type="range" min="1" max="5" value={val_blur} onChange={() => {this.handleChange}}/>
            <br/>
            <button className="Button-Edit" onClick={()=>{this.setState({flag_grayscale :true})}}> Grayscale</button>
            &nbsp;&nbsp;
            <button className="Button-Edit" onClick={()=>{this.setState({flag_invert :true})}}> Invert </button>
        </div>
    )
}

showActions(){
    return(
        <div className="action -bar">
            <button className="Button-Edit" onClick={()=>{this.setState({clickedCrop : true})}}> Crop </button> 
            <br/> 
            Brightness : <input type="range" min="0" max="1" value={val_brightness} onChange={() => {this.handleChange}}/>  
            <br/> 
            Blur :<input type="range" min="1" max="5" value={val_blur} onChange={() => {this.handleChange}}/>
            <br/>
            <button className="Button-Edit" onClick={()=>{this.setState({flag_grayscale :true})}}> Grayscale</button>
            &nbsp;&nbsp;
            <button className="Button-Edit" onClick={()=>{this.setState({flag_invert :true})}}> Invert </button>
        </div>
    )
}

• javascript
• reactjs

2 Answers 2

Since you are using the onChange method means controlled input, so you need to use the state value to store the changed value, inside the onchange method update state value of respective input element, Check this example how to change slider value, run this snippet:

class App extends React.Component{
 
   constructor(){
       super();
       this.state = {
          val_brightness: '',
          val_blur: ''
       }
   }
   
   handleChange(e){
       let obj = {};
       obj[e.target.name] = e.target.value;
       this.setState(obj);
   }
   
   showActions(){
      return(
        <div className="action -bar"> 
            Brightness : <input type="range" min="0" max="1" name='val_brightness' value={this.state.val_brightness} onChange={(e) => {this.handleChange(e)}}/>  
            <br/> 
            Blur : <input type="range" min="1" max="5" value={this.state.val_blur} name='val_blur' onChange={(e) => {this.handleChange(e)}}/>
        </div>
      )
   }
   
   render(){
      return(
         this.showActions()
      )
   } 
}

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app' />

In react.js there are two ways to change state of ponents. The remended one is to make child ponent value prop dependent on parent's state and change state of your parent ponent which will lead to re-rendering of the whole ponent.

The hacky way is to change prop of the ponent directly using ref.

I'd remend you to read react.js documentation thoroughly until you'll understand what I mean.