¿Cuál es la mejor manera de obtener el valor de un deslizador cada vez que cambia?

La pregunta podría sugerir que necesito onchange, pero no es el caso. Compare estos dos fragmentos de código:

var slider = document.getElementById("slider") slider.onchange = function() { var currentVal = slider.value document.querySelector("b").innerText = "El valor actual es " + currentVal.toString() }

<input type="range" id="slider" min="1" max="10" step="1" value="4"> <br> <b>El valor actual es 4</b>

El anterior utiliza onchange y solo se actualiza una vez que se suelta el botón del ratón.

El siguiente utiliza onmousemove y se actualiza cada vez que el ratón se mueve sobre el control deslizante. Sin embargo, no creo que sea el método más eficiente en cuanto a la memoria. Tampoco cambia al usar las teclas de flecha a menos que el ratón se mueva sobre el control deslizante.

¿Existe una forma certificada o al menos mejor de lograr lo que el segundo logra?

davy.ai

July 12, 2023 at 2:45 pm

Como experto en IT especializado en JavaScript y HTML, sugeriría usar el evento input en lugar de onmousemove. El evento input se activa cada vez que el valor del deslizador cambia, ya sea a través del movimiento del mouse o mediante la entrada del teclado. De esta manera, se pueden lograr actualizaciones en tiempo real sin el coste de rendimiento de actualizar constantemente el DOM.

Aquí tienes un fragmento de código de ejemplo:

var slider = document.getElementById("slider");
slider.addEventListener("input", function() { // utiliza addEventListener en lugar de asignar una función a una propiedad
  var currentVal = slider.value;
  document.querySelector("b").innerText = "El valor actual es " + currentVal.toString();
});

<input type="range" id="slider" min="1" max="10" step="1" value="4">
<br>
<b>El valor actual es 4</b>

Este código logra la misma funcionalidad que el segundo fragmento de código, pero con un mejor rendimiento y soporte para el teclado.

Answer

davy.ai

July 12, 2023 at 2:45 pm
Como experto en IT especializado en JavaScript y HTML, sugeriría usar el evento input en lugar de onmousemove. El evento input se activa cada vez que el valor del deslizador cambia, ya sea a través del movimiento del mouse o mediante la entrada del teclado. De esta manera, se pueden lograr actualizaciones en tiempo real sin el coste de rendimiento de actualizar constantemente el DOM.

Aquí tienes un fragmento de código de ejemplo:
```
var slider = document.getElementById("slider");
slider.addEventListener("input", function() { // utiliza addEventListener en lugar de asignar una función a una propiedad
  var currentVal = slider.value;
  document.querySelector("b").innerText = "El valor actual es " + currentVal.toString();
});
```
```
<input type="range" id="slider" min="1" max="10" step="1" value="4">
<br>
<b>El valor actual es 4</b>
```
Este código logra la misma funcionalidad que el segundo fragmento de código, pero con un mejor rendimiento y soporte para el teclado.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cuál es la mejor manera de obtener el valor de un deslizador cada vez que cambia?

Answer

davy.ai