The idea is that by moving each slider where it says number of total images show the result of the sum of the three sliders !
The idea is that by moving each slider where it says number of total images show the result of the sum of the three sliders !
I think I have something for you that might interest you. Here is the code. you can try it without problem by clicking on the execute button. If it worked for you, do not forget to mark the answer as the correct one. Greetings.
window.addEventListener('load', main, false);
function main() {
var n1 = document.querySelector('#num1');
var n2 = document.querySelector('#num2');
var n3 = document.querySelector('#num3');
var c1 = document.querySelector('#cant1');
var c2 = document.querySelector('#cant2');
var c3 = document.querySelector('#cant3');
var tot = document.querySelector('#total');
var handler = function() {
var a, b, c;
a = ~~n1.value;
b = ~~n2.value;
c = ~~n3.value;
c1.innerHTML = a;
c2.innerHTML = b;
c3.innerHTML = c;
tot.innerHTML = a + b + c;
};
/// Se puede omitir el 'mousemove' pero le da un efecto
/// de ejecucion en 'tiempo real' bastante interesante
n1.addEventListener('change', handler, false);
n1.addEventListener('mousemove', handler, false);
n2.addEventListener('change', handler, false);
n2.addEventListener('mousemove', handler, false);
n3.addEventListener('change', handler, false);
n3.addEventListener('mousemove', handler, false);
}<input type="range" id="num1" min="0" max="100" step="5">
<span> Cantidad #1: <span id="cant1">0</span> </span><br>
<input type="range" id="num2" min="0" max="100" step="5">
<span> Cantidad #2: <span id="cant2">0</span> </span><br>
<input type="range" id="num3" min="0" max="100" step="5">
<span> Cantidad #3: <span id="cant3">0</span> </span><br>
<span> Total: <span id="total">0</span> </span>