Calculate multiple range slider value

Question

I am trying to calculate price from 3 range slider, however it's return wrong result, what I tried so far:

 let result1 = 0; let result2 = 0; let result3 = 0; $('input[name="cdnvideolive"]').change(function() { let val = parseInt($(this).val()); let price = 1000; let result1 = price * val; $('var').text(result1 + result2 + result3); }); $('input[name="cdnvideovid"]').change(function() { let val = parseInt($(this).val()); let price = 2000; let result2 = price * val; $('var').text(result1 + result2 + result3); }); $('input[name="cdnvideostor"]').change(function() { let val = parseInt($(this).val()); let price = 3000; let result3 = price * val; $('var').text(result1 + result2 + result3); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="range" name="cdnvideolive" value="1" min="1" max="50" data-steps="50"> <input type="range" name="cdnvideovid" value="1" min="1" max="20" data-steps="20"> <input type="range" name="cdnvideostor" value="1" min="1" max="30" data-steps="30"> total price: <var></var>$

I want total of all ranges, but it return single total. what I have done wrong?

Answer 1

You need to use global results and the range has to start with zero.

 let result1 = 0; let result2 = 0; let result3 = 0; $('input[name="cdnvideolive"]').change(function() { let val = parseInt($(this).val()); let price = 1000; result1 = price * val; $('var').text(result1 + result2 + result3); }); $('input[name="cdnvideovid"]').change(function() { let val = parseInt($(this).val()); let price = 2000; result2 = price * val; $('var').text(result1 + result2 + result3); }); $('input[name="cdnvideostor"]').change(function() { let val = parseInt($(this).val()); let price = 3000; result3 = price * val; $('var').text(result1 + result2 + result3); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="range" name="cdnvideolive" value="0" min="0" max="50" data-steps="50"> <input type="range" name="cdnvideovid" value="0" min="0" max="20" data-steps="20"> <input type="range" name="cdnvideostor" value="0" min="0" max="30" data-steps="30"> total price: <var></var>$