Tengo un control deslizante de entrada html básico. Este control deslizante está controlado por algún otro elemento de la interfaz de usuario. Esto significa que puede saltar discretamente en valor.
Por ejemplo, si el valor actual es 100, el otro elemento de la interfaz de usuario puede establecerlo en 500.
En tal escenario, ¿es posible hacer que el control deslizante haga una transición suave de 100 a 500? ¿Quizás en pasos de 10 o incluso de 1?
EDITADO:
Estoy usando reaccionar. Intenté usar setInterval para actualizar el estado de uso que contiene el valor del control deslizante, pero no funciona.
Aquí hay una implementación muy básica de una interpolación lineal con un intervalo. Puede cambiar _interpSpeed y el temporizador de intervalos a lo que desee para que la animación sea más rápida o más lenta. _interpSpeed es el tamaño del paso y el temporizador de intervalo es la frecuencia del paso (actualmente establecido en 60 fps).
const _interpSpeed = 5; var interval = setInterval(()=>{ let range = document.querySelector("input[type=range]"); //If we don't have a value to interp to, just return if(range.newValue === undefined) return; //Convert the string value to an integer let value = parseInt(range.value); //Determine whether we need to add or subtract let delta = range.newValue - value; let sign = delta / Math.abs(delta); //Add the designated interp amount (linear) let v = value + sign * _interpSpeed; //Prevent exceeding the minimum or maximum of the range if(v > parseInt(range.max)) v = parseInt(range.max); else if(v < parseInt(range.min)) v = parseInt(range.min); //Prevent going past the desired value else if(v > range.newValue && sign > 0) v = range.newValue; else if(v < range.newValue && sign < 0) v = range.newValue; //Update the value range.value = v; //If we've reached the desired value, delete the desired value //so the interval will return at the top of the function. if(range.value == range.newValue) delete range.newValue; }, 1000/60); document.querySelector("input[type=number]").addEventListener("keyup", function(){ let v = parseInt(this.value); if(Number.isNaN(v)) v = 0; let range = document.querySelector("input[type=range]"); range.newValue = v; }); input[type="range"] { width: 100%; } Pick a number between 0 and 500 <input type="number" value="250" min="0" max="500"/> <br><br> <input type="range" value="250" min="0" max="500"/>