0

Tres sliders, de los cuales quiero sumar los resultados

La idea es que al mover cada slider en donde dice numero de imágenes totales muestre el resultado de la suma de los tres sliders!

3
  • 1
    si puedes publicar el código con el que trabajas mucho mas fácil poder ayudarte. el 15 dic. 2017 a las 21:23
  • Bienvenido a stackoverflow en español, es importante que leas Cómo preguntar para que puedas formular buenas preguntas y obtengas mejores respuestas, debes agregar el código que has intentado y si es posible hacer un ejemplo ejecutable en el snippet, saludos! el 15 dic. 2017 a las 21:27
  • Con un evento onChange sobre cada input range (el evento puede ser compartido), cada vez que cambie uno se debe ejecutar el evento y este evento debe obtener los valores de los input, sumarlos y asignarlo a la etiqueta que muestra el valor. el 15 dic. 2017 a las 21:30

1 respuesta 1

0

Creo que tengo algo para ti que pudiera interesarte. Aqui esta el codigo. puedes probarlo sin problema haciendo click en el boton ejecutar. Si te sirvio no olvides marcar la respuesta como la correcta. Saludos.

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>

2
  • Hola Isaac, tu código está bien y es funcional pero deberías abstenerte de responder preguntas de baja calidad hasta que el OP la corrija, debido a que las preguntas de mala calidad tienden a ser cerradas y no debemos fomentar estas malas prácticas en el sitio, saludos! el 15 dic. 2017 a las 21:32
  • 1
    @CamiloVasquez: Gracias por el consejo. Voy a tenerlo en cuenta. Saludos.
    – Isaac Vega
    el 15 dic. 2017 a las 21:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.