Set checkbox value in React JS

I'm trying to change the value of the checkbox with the onChange function of another input field.

I have something like this :

class price extends React.Component {
constructor(props){
    super(props);

    this.state = {
        minValue: 0,
        maxValue: 20000,
        step: 1000,
        firstValue: null,
        secondValue: null,
        chcboxValue: false
    };

    this.handleChange = this.handleChange.bind(this);
}

componentWillMount(){
    this.setState({firstValue: this.state.minValue, secondValue: this.state.maxValue});
}

handleChange(name, event){
    let value = event.target.value;
    //We set the state value depending on input that is clicked
    if(name === "second"){
        if(parseInt(this.state.firstValue) < parseInt(value)){
            this.setState({secondValue:value});
        }
    }else{
        //The first value can't be greater than the second value
        if(parseInt(value) < parseInt(this.state.secondValue)) {
            this.setState({firstValue: value});
        }
    }

    //We set the checkbox value
    if(parseInt(this.state.firstValue) != parseInt(this.state.minValue) || parseInt(this.state.secondValue) != parseInt(this.state.maxValue)){
        this.setState({chcboxValue: true});
    }else{
        this.setState({chcboxValue: false});
    }
}

render(){
    const language = this.props.language;
    return (
        <div>
            <div className="priceTitle">{language.price}</div>
            <InputRange language={language}
                        firstValue={parseInt(this.state.firstValue)}
                        secondValue={parseInt(this.state.secondValue)}
                        minValue={parseInt(this.state.minValue)}
                        maxValue={parseInt(this.state.maxValue)}
                        step={parseInt(this.state.step)}
                        handleChange={this.handleChange}
                        chcboxValue={this.state.chcboxValue}/>
        </div>
    );
}
}

My InputRange component is something like this :

const inputRange = ({language, firstValue, secondValue, minValue, maxValue, step, handleChange, chcboxValue}) => {
return (
    <div>
        <div className="rangeValues">Range : {firstValue} - {secondValue}</div>


        <section className="range-slider">
            <input type="checkbox" checked={chcboxValue} />
            <input type="range" value={firstValue} min={minValue} max={maxValue} step={step}  onChange={handleChange.bind(this, "first")}/>
            <input type="range" value={secondValue} min={minValue} max={maxValue} step={step} onChange={handleChange.bind(this, "second")}/>

            <div className="minValue">{minValue}</div>
            <div className="maxValue">{maxValue}</div>
        </section>
    </div>
);
};

I that the checkbox value on initial load is set to false. When user changes the values of the price range slider I want that the checkbox value changes to true.

When user changes the values of the price range slider to their initial values (min and max values) I want that the checkbox value again changes to false.

In my exaample it isn't working.

Any ideas?