title: How to make form inputs interdependent in ReactJS
body: <p>I'm practicing to create an app similar to those of peer-2-peer lending, to give a better idea here is a screen.
  <a href="https://i.stack.imgur.com/1wz4o.png" rel="nofollow noreferrer">Lending Application </a></p>
  <p>So, loan size and amount represent the same data: the amount of money you want to get. I would like to know how to connect the input amount with the slider, so that the latter moves according to the amount typed and vice versa.
  Also I would like the interest rate to increase by a factor of X as the amount requested increases and vice versa.</p>
  <p>Form code:</p>
  <pre><code>......
    &lt;div className=&quot;form-group&quot;&gt;
                &lt;label htmlFor=&quot;size&quot;&gt;Loan size&lt;/label&gt;
                &lt;Typography id=&quot;discrete-slider-always&quot; gutterBottom&gt;
                  Min.
                &lt;/Typography&gt;
                &lt;Slider
                  defaultValue={550}
                  min={100}
                  max={1000}
                  aria-labelledby=&quot;discrete-slider-always&quot;
                  step={1}
                  valueLabelDisplay=&quot;on&quot;
                /&gt;
  
                &lt;TextField
                  id=&quot;standard-read-only-input&quot;
                  label=&quot;Interest rate&quot;
                  defaultValue=&quot;25%&quot;
                  InputProps={{
                    readOnly: true,
                  }}
                /&gt;
  
                &lt;FormControl fullWidth  variant=&quot;outlined&quot;&gt;
                  &lt;InputLabel htmlFor=&quot;outlined-adornment-amount&quot;&gt;Amount&lt;/InputLabel&gt;
                  &lt;OutlinedInput
                    id=&quot;size&quot;
                    name=&quot;size&quot;
                    value={tutorial.size}
                    onChange={handleInputChange}
                    startAdornment={&lt;InputAdornment position=&quot;start&quot;&gt;$&lt;/InputAdornment&gt;}
                    labelWidth={60}
  
                  /&gt;
                &lt;/FormControl&gt;
  
  ......
  </code></pre>
  <p>I hope I was as clear as possible!</p>