3

Estoy intentando hacer una página en la que el usuario puede cambiar unos input range, y quiero que la suma de sus values sea 100 siempre. Para ello, quiero que si un input tiene un value de 25, el otro tenga un value de 75, por ejemplo. El caso es que al cambiar el value de "angleslider", se cambia el value de "minimumslider", pero al revés no. Además, la visualización del value de minimumslider no funciona cuando cambias el value de angleslider.

    var angleslider;
    var minimumslider;

    function setup() {
        angleslider = createSlider(0, 100, 3);
        minimumslider = createSlider(0, 100);

        setInterval(function(){
            angleslider.attribute("value", 100 - minimumslider.value());
            minimumslider.attribute("value", 100 - angleslider.value());
        }, 0);
    };

(Estoy usando p5.js pero si la solución no necesita p5, mejor)¿Alguna idea?

1 respuesta 1

2

Puedes controlar el valor con el evento "input" y modificar el valor del otro slider fácilmente:

const uno = document.getElementById('uno');
const dos = document.getElementById('dos');
const label1 = document.getElementById('valUno');
const label2 = document.getElementById('valDos');
uno.addEventListener('input', () => {
  let val= uno.value;
  //el atributo value es un string, el signo "+" transforma en number
  dos.value= 100 - (+val);
  label1.innerHTML = val;
  label2.innerHTML = dos.value;
});
<input id="uno" type="range" min="0" max="100" step="1" value="50"/> <label id="valUno">50</label>
<input id="dos" type="range" min="0" max="100" step="1" value="50"/> <label id="valDos">50</label>

1
  • buen trabajo, +1 punto porque a demás lo has explicado con labels. Solo te habría faltado poner el EventListener a "dos"... por lo demás... perfecto
    – Clipi
    Commented el 30 mar. 2019 a las 19:57

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.