title: Change value of controlled input in React
body: <p>I'm looking for some help on React controlled/uncontrolled/controllable inputs.</p>
  
  <p>Here's a diagram to explain:</p>
  
  <p><a href="https://i.stack.imgur.com/7fvCi.jpg" rel="nofollow noreferrer">React Slider</a></p>
  
  <p>As you can see in the image, I have two components:</p>
  
  <ul>
  <li>The Slider component: A ranged input from 0 to 50000.  </li>
  <li>The second component is a text input. Currently this is read only and displays the value of the slider. </li>
  </ul>
  
  <p><strong>What I want to do</strong></p>
  
  <ul>
  <li>The text input is currently a <em>controlled component</em>. Instead I would like to make it so the user can type into the text box. If the added text is both a number and between 0 to 50,000, the slider state value would update to the typed text input value. </li>
  </ul>
  
  <p>Here's my code:</p>
  
  <pre><code>  state = {
      sliderValue: 10000
    }
  
  handleChangeSlider = value =&gt; {
      this.setState({
        sliderValue: value
      })
    }
  
  
  &lt;Slider
  min={5000}
  max={45000}
  step={250}
  value={this.state.sliderValue}
  onChange={this.handleChangeSlider}
  /&gt;
  
  &lt;input
  className={amountInput}
  value={this.state.sliderValue}
  /&gt;
  </code></pre>
  
  <p>One possible solution to this I have thought of, is to overlay a new 'filter' input over the controlled input. Thereby there is two inputs, one to display the slider value and one to input a new value.</p>
  
  <p>I feel like I am missing something here.</p>
  
  <p>Is there anyone who can guide me down the right track?</p>
  
  <p>Thanks,</p>