title: How can I create dynamic input sliders with react?
body: <p>I am trying to create a modal component for my application and my modal needs a slider to dynamically scale the image in the modal based on the user's input. I am done creating this modal and it looks like this: <a href="https://i.stack.imgur.com/ynFYv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ynFYv.png" alt="enter image description here" /></a></p>
  <p>The problem I have is when I click on the slider especially on the value in the middle, the slider jumps to the third value. It only comes to the second value after going to the third value.</p>
  <p>This is my JSX code</p>
  <pre><code>class pizzaModal extends Component {
    state = {
      toggle: false
    }
    toggleHandler = ()=&gt;{
      this.setState({
              toggle: !this.state.toggle
          });
    }
    render (){
      return (
        &lt;div className={styles.Pizzamodal}&gt;
            &lt;div className={styles.ModalContainer}&gt;
              &lt;div className={styles.ImageContainer}&gt;
                &lt;img src={pizzapicture} alt=&quot;pizzapicture&quot;/&gt;
              &lt;/div&gt;
              &lt;div className={styles.DetailsContainer}&gt;
                &lt;div&gt;
                  &lt;div className={styles.TextDetails}&gt;
                    &lt;h1&gt;Chicken Curry&lt;/h1&gt;
                    &lt;p&gt;Red onions, bell peppers, &lt;br/&gt; chicken, pineapple, mozarella, &lt;br/&gt; tomatosauce, curry, chilli peppers.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                  &lt;form className={styles.switchButton}&gt;
                    &lt;input type=&quot;radio&quot; name=&quot;pizza&quot; id=&quot;small&quot; value=&quot;small&quot; onChange={this.toggleHandler}
                                checked={!this.state.toggle}/&gt;
                    &lt;label for=&quot;small&quot;&gt;25cm&lt;/label&gt;
                    &lt;input type=&quot;radio&quot; name=&quot;pizza&quot; id=&quot;medium&quot; value=&quot;medium&quot; onChange={this.toggleHandler}
                                checked={this.state.toggle}/&gt;
                    &lt;label for=&quot;medium&quot;&gt;30cm&lt;/label&gt;
                    &lt;input type=&quot;radio&quot; name=&quot;pizza&quot; id=&quot;large&quot; value=&quot;large&quot; onChange={this.toggleHandler}
                                checked={this.state.toggle}/&gt;
                    &lt;label for=&quot;large&quot;&gt;35cm&lt;/label&gt;
                  &lt;/form&gt;
                &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              
            &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  export default pizzaModal;
  </code></pre>
  <p>This is the CSS</p>
  <pre><code>*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .Pizzamodal{
    position: fixed;
    z-index: 300;
    top: 25px;
    left: 250px;
    width: 880px;
    height: 610px;
    background-color: white;
    border-radius: 20px;
  }
  .ModalContainer{
    display: flex;
    justify-content: space-between;
  }
  .ImageContainer img{
    margin-top: 150px;
    margin-left: 90px;
  }
  .DetailsContainer{
    margin-right: 20px;
    margin-top: 40px;
  }
  .TextDetails h1{
    font-size: 1.2rem;
    font-family: 'Roboto', sans-serif;
    padding-bottom: 40px;
  }
  .TextDetails p{
    font-size: 1.1rem;
    font-family: 'Roboto', sans-serif;
    padding-bottom: 40px;
  }
  .switchButton input{
    position: absolute;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
  }
  .switchButton label{
    display: inline-block;
    width: 100px;
    background-color: #e4e4e4;
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    text-shadow: none;
    padding: 6px 14px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.1s ease-in-out;
  }
  .switchButton input:checked + label{
    background-color: #F07718;
      color: #fff;
    box-shadow: none;
  }
  .switch-field label:first-of-type {
    border-radius: 4px 0 0 4px;
  }
  
  .switch-field label:last-of-type {
    border-radius: 0 4px 4px 0;
  }
  </code></pre>