La pregunta podría sugerir que necesito onchange , que no es el caso. Compara estos dos fragmentos:
var slider = document.getElementById("slider") slider.onchange = function() { var currentVal = slider.value document.querySelector("b").innerText = "The current value is " + currentVal.toString() } <input type="range" id="slider" min="1" max="10" step="1" , value="4"> <br> <b>The current value is 4</b> var slider = document.getElementById("slider") slider.onmousemove = function() { var currentVal = slider.value document.querySelector("b").innerText = "The current value is " + currentVal.toString() } <input type="range" id="slider" min="1" max="10" step="1" , value="4"> <br> <b>The current value is 4</b> El superior usa onchange y solo se actualiza una vez que se suelta el mouse.
El inferior usa onmousemove y se actualiza cada vez que el mouse se mueve sobre el control deslizante. Sin embargo, no creo que ese sea el método de mayor ahorro de memoria. Tampoco cambia al usar las teclas de flecha a menos que el mouse se mueva sobre el control deslizante.
¿Hay una forma certificada o al menos mejor de hacer lo que logra el inferior?
Simplemente use el evento oninput , llamará cuando el usuario se deslice en los navegadores modernos.
var slider = document.getElementById("slider") slider. oninput = function() { var currentVal = slider.value document.querySelector("b").innerText = "The current value is " + currentVal.toString() } <input type="range" id="slider" min="1" max="10" step="1" , value="4"> <br> <b>The current value is 4</b>