title: Multiple Form Sliders on One Page (JS Variable Scope)
body: <p>I understand the gist of the problem here but am not sure how to tackle it. 
  I have multiple form sliders on one page, and they will add up to a final calculation (showing the user some sort of savings). In the function <code>finalCalc</code> there would be no way for it to know what val1, val2, and val3 are because they are out of the scope of the function. </p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
  function slider1Change(val){
  document.getElementById('slider1Status').innerHTML = val;
  }
  
  function slider2Change(val2){
  document.getElementById('slider2Status').innerHTML = val2;
  }
  
  function slider3Change(val3){
  document.getElementById('slider3Status').innerHTML = val3;
  }
  
  function finalCalc(val4){
  document.getElementById('finalCalc').innerHTML = val1 + val2 + val3;
  }
  &lt;/script&gt;
  
  &lt;form&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="formControlRange"&gt;Number of Sales:&lt;/label&gt;   &lt;span id="slider1Status"&gt;50&lt;/span&gt;
      &lt;input type="range" class="form-control-range" onInput="slider1Change(this.value)"&gt;
    &lt;/div&gt;
  
  
     &lt;div class="form-group"&gt;
      &lt;label for="formControlRange"&gt;Number of Transactions:&lt;/label&gt;  &lt;span id="slider2Status"&gt;50&lt;/span&gt;
      &lt;input type="range" class="form-control-range" onInput="slider2Change(this.value)"&gt;
    &lt;/div&gt;
  
     &lt;div class="form-group"&gt;
      &lt;label for="formControlRange"&gt;Number of Returns:&lt;/label&gt;  &lt;span id="slider3Status"&gt;50&lt;/span&gt;
      &lt;input type="range" class="form-control-range" onInput="slider3Change(this.value)"&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;h2&gt;You could be saving $&lt;span id="finalCalc"&gt;50&lt;/span&gt; per month by switching to CompanyX&lt;/h2&gt;
  </code></pre>