class InputComponent extends React.Component {

  state = {
    inputValue: this.props.value
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.props.value) {
      this.setState({ inputValue: nextProps.value })
    }
  }

  handleChange = (e) => {
    this.setState({ inputValue: e.target.value}, () => {
      if (this.props.onChange){
        this.props.onChange(this.state.inputValue)
      }
    })
  }

  render() {
    return <input
      value={this.state.inputValue}
      onChange={this.handleChange} />
  }

class RangeComponent extends React.Component {

  state = {
    inputValueFrom: this.props.from,
    inputValueTo: this.props.to
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      inputValueFrom: nextProps.from,
      inputValueTo: nextProps.to
    }, () => this.publish())
  }

  handleUpdateFrom = (e) => {
    this.setState({ inputValueFrom: e }, () => this.publish())
  }

  handleUpdateTo = (e) => {
    this.setState({ inputValueTo: e }, () => this.publish())
  }

  publish(){
    if (this.props.onUpdated) {
      this.props.onUpdated({
        from: this.state.inputValueFrom,
        to: this.state.inputValueTo
      })
    }
  }

  render() {
    return <div>
      <h6>From:</h6>
      <InputComponent value={this.state.inputValueFrom} onChange={this.handleUpdateFrom} />
      <h6>To:</h6>
      <InputComponent value={this.state.inputValueTo} onChange={this.handleUpdateTo} />
    </div>
  }
}

<RangeComponent from={rangeFrom} to={rangeTo} onUpdated={this.handleRangeUpdate} />

handleRangeUpdate = (range) => {
    console.log(`Range updated ${range.from} - ${range.to}`)
    this.setState({ selectedRange: `Range updated ${range.from} - ${range.to}`})
}

<button className='btn btn-block btn-primary' value='' onClick={this.handleResetFromButtonClick}>Reset Range From</button>

handleResetFromButtonClick = (e) => {
    this.setState({ rangeFrom: e.target.value })
  }

import React from 'react'
import { render } from 'react-dom'

class InputComponent extends React.Component {

  state = {
    inputValue: this.props.value
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.props.value) {
      this.setState({ inputValue: nextProps.value })
    }
  }

  handleChange = (e) => {
    this.setState({ inputValue: e.target.value}, () => {
      if (this.props.onChange){
        this.props.onChange(this.state.inputValue)
      }
    })
  }

  render() {
    return <input
      value={this.state.inputValue}
      onChange={this.handleChange} />
  }
}

class RangeComponent extends React.Component {

  state = {
    inputValueFrom: this.props.from,
    inputValueTo: this.props.to
  }

  componentWillReceiveProps(nextProps) {

    console.log('componentWillReceiveProps', nextProps)

    this.setState({
      inputValueFrom: nextProps.from,
      inputValueTo: nextProps.to
    }, () => this.publish())
  }

  handleUpdateFrom = (e) => {
    this.setState({ inputValueFrom: e }, () => this.publish())
  }

  handleUpdateTo = (e) => {
    this.setState({ inputValueTo: e }, () => this.publish())
  }

  publish(){
    if (this.props.onUpdated) {
      this.props.onUpdated({
        from: this.state.inputValueFrom,
        to: this.state.inputValueTo
      })
    }
  }

  render() {
    return <div>
      <h6>From:</h6>
      <InputComponent value={this.state.inputValueFrom} onChange={this.handleUpdateFrom} />
      <h6>To:</h6>
      <InputComponent value={this.state.inputValueTo} onChange={this.handleUpdateTo} />
    </div>
  }
}

class App extends React.Component {

  state = {
    value: 'My Value',
    rangeFrom: 'Range From',
    rangeTo: 'Range To',
    selectedRange: null
  }

  handleSingleChange = (e) => {
    this.setState({ value: e })
  }

  handleRangeUpdate = (range) => {
    console.log(`Range updated ${range.from} - ${range.to}`)
    //this.setState({ selectedRange: `Range updated ${range.from} - ${range.to}`})
  }

  handleResetFromButtonClick = (e) => {
    this.setState({ rangeFrom: e.target.value })
  }

  handleResetToButtonClick = (e) => {
    this.setState({ rangeTo: e.target.value })
  }

  render() {

    const { value, selectedRange, rangeFrom, rangeTo } = this.state

    console.log('rangeFrom', rangeFrom)
    console.log('rangeTo', rangeTo)

    return (
      <div>
        <h3>Component: {value}</h3>
        <InputComponent value={value} onChange={this.handleSingleChange} />
        <hr />
        <h3>Range Component: {selectedRange}</h3>
        <RangeComponent from={rangeFrom} to={rangeTo} onUpdated={this.handleRangeUpdate} />

        <hr />
        <button className='btn btn-block btn-primary' value='' onClick={this.handleResetFromButtonClick}>Reset Range From</button>
        <br />
        <button className='btn btn-block btn-primary' value='' onClick={this.handleResetToButtonClick}>Reset Range To</button>
      </div>
    )
  }
}

render(<App />, document.getElementById("root"))