title: Input sliders , oninput with dynamic calculations
body: <p><br>
  I have a few issues with my code.
  I want to be able to change the sliders and with javascript dynamically calculate and update the results. I can not get it to work as intended.</p>
  
  <p>Problems:</p>
  
  <ul>
  <li>When I change the sliders, the addition, subtraction and division is not being calculated and the elements are not updated.</li>
  <li>When I manually change the sliders value by user keyboard input in the <code>inputs</code> with <code>type="number"</code>, the background of the slider and the <code>span</code> element with <code>class="range-slider__value"</code> is not updating. It is working as intended when i move the slider button.</li>
  </ul>
  
  <p>Best regards,<br>Frank</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// colors of sliders
  const settings={
    fill: '#1abc9c',
    background: '#d7dcdf'
  }
  
  // find all sliders
  const sliders = document.querySelectorAll('.range-slider');
  
  // Iterate through that list of sliders
  Array.prototype.forEach.call(sliders,(slider)=&gt;{
    // Look inside slider for our input add an event listener
    slider.querySelector('input').addEventListener('input', (event)=&gt;{
      // 1. apply value to the span
      slider.querySelector('span').innerHTML = event.target.value;
      // 2. applyfill to the input
      applyFill(event.target);
    });
    // Don't wait for the listener, apply it now.
    applyFill(slider.querySelector('input'));
  });
  
  // This function applies the fill to the sliders
  function applyFill(slider) {
    // turn value into a percentage to figure out how far it is in between the min and max of our input
    const percentage = 100*(slider.value-slider.min)/(slider.max-slider.min);
    //  create a linear gradient that separates at the above point
    // background color will change here
    const bg = `linear-gradient(90deg, ${settings.fill} ${percentage}%, ${settings.background} ${percentage+0.1}%)`;
    slider.style.background = bg;
  }
  
  
  
  // Store input as vars and do math.
  function updateValue() {
    var firstNum = document.querySelector('input[name=amountInput]').value;
    var secondNum = document.querySelector('input[name=amountInput]').value;
    var addition = firstNum + secondNum;
    var subtraction = firstNum - secondNum;
    var division = firstNum / secondNum;
    document.querySelector('.addition').innerHTML = addition;
    document.querySelector('.subtraction').innerHTML = subtraction;
    document.querySelector('.division').innerHTML = division;
  }
  function firstNumSliderChange(val) {
           document.querySelector('.output').innerHTML = val;
           updateValue();
        }
  function secondNumSliderChange(val) {
           document.querySelector('.output-two').innerHTML = val;
           updateValue();
        }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h5 {margin:0;padding:0;}
  
  .range-slider__range {
    -webkit-appearance: none;
    height: 10px;
    border-radius: 5px;
    background: #d7dcdf;
    outline: none;
    padding: 0;
    margin: 0;
    width:250px;
    
  }
  
  
  
  .final-outputs {
    display:flex;
    align-items:center;
    width:400px;
    justify-content: space-between;
    background: #eee;
    padding:1rem;
  }
  
  .addition, .subtraction, .division {
    display:flex;
    justify-content: center;
    margin-top:.1rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;form&gt;
      &lt;div class="range-slider"&gt;
        &lt;input class="range-slider__range" type="range" name="amountRange" min="0" max="1000" value="0" oninput="this.form.amountInput.value=this.value" /&gt;
        &lt;input class="output" type="number" name="amountInput" min="0" max="1000" value="0" oninput="this.form.amountRange.value=this.value" /&gt;
        &lt;span class="range-slider__value"&gt;0&lt;/span&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  
    &lt;form&gt;
      &lt;div class="range-slider"&gt;
        &lt;input class="range-slider__range" type="range" name="amountRange" min="0" max="1000" value="0" oninput="this.form.amountInput.value=this.value" /&gt;
        &lt;input class="output-two" type="number" name="amountInput" min="0" max="1000" value="0" oninput="this.form.amountRange.value=this.value" /&gt;
        &lt;span class="range-slider__value"&gt;0&lt;/span&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  
    &lt;div class="final-outputs"&gt;
      &lt;div class="final-output final-output--add"&gt;
        &lt;h5&gt;addition&lt;/h5&gt;&lt;span class="addition"&gt;1&lt;/span&gt;&lt;/div&gt;
      &lt;div class="final-output final-output--sub"&gt;
        &lt;h5&gt;subtraction&lt;/h5&gt;&lt;span class="subtraction"&gt;2&lt;/span&gt;&lt;/div&gt;
      &lt;div class="final-output final-output--div"&gt;
        &lt;h5&gt;division&lt;/h5&gt;&lt;span class="division"&gt;3&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>