Multiple Form Sliders on One Page (JS Variable Scope)

Question

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 finalCalc 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.

 <script type="text/javascript">
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;
}
</script>

<form>
  <div class="form-group">
    <label for="formControlRange">Number of Sales:</label>   <span id="slider1Status">50</span>
    <input type="range" class="form-control-range" onInput="slider1Change(this.value)">
  </div>


   <div class="form-group">
    <label for="formControlRange">Number of Transactions:</label>  <span id="slider2Status">50</span>
    <input type="range" class="form-control-range" onInput="slider2Change(this.value)">
  </div>

   <div class="form-group">
    <label for="formControlRange">Number of Returns:</label>  <span id="slider3Status">50</span>
    <input type="range" class="form-control-range" onInput="slider3Change(this.value)">
  </div>
</form>

<h2>You could be saving $<span id="finalCalc">50</span> per month by switching to CompanyX</h2>

Answer 1

On Change of every slider call the finalCalc(); and get the values of slider1Status, slider2Status, slider3Status

function slider1Change(val){
document.getElementById('slider1Status').innerHTML = val;
finalCalc();
}

function slider2Change(val2){
document.getElementById('slider2Status').innerHTML = val2;
finalCalc();
}

function slider3Change(val3){
document.getElementById('slider3Status').innerHTML = val3;
finalCalc();
}

function finalCalc(){
var val1=parseInt(document.getElementById('slider1Status').innerHTML,10);
var val2=parseInt( document.getElementById('slider2Status').innerHTML,10); 
var val3=parseInt(document.getElementById('slider3Status').innerHTML,10);
document.getElementById('finalCalc').innerHTML = (val1+val2+val3);
}

<form>
  <div class="form-group">
    <label for="formControlRange">Number of Sales:</label>   <span id="slider1Status">50</span>
    <input type="range" class="form-control-range" onInput="slider1Change(this.value)">
  </div>


   <div class="form-group">
    <label for="formControlRange">Number of Transactions:</label>  <span id="slider2Status">50</span>
    <input type="range" class="form-control-range" onInput="slider2Change(this.value)">
  </div>

   <div class="form-group">
    <label for="formControlRange">Number of Returns:</label>  <span id="slider3Status">50</span>
    <input type="range" class="form-control-range" onInput="slider3Change(this.value)">
  </div>
</form>

<h2>You could be saving $<span id="finalCalc">50</span> per month by switching to CompanyX</h2>