Quiero crear un elemento deslizante (rango de tipo de entrada) en JavaScript que vuelva a su valor inicial después del lanzamiento. De esta manera obtengo el comportamiento de un joystick que vuelve a su posición de equilibrio después de soltarlo.
Ahora tengo el siguiente código:
var element = document.createElement('input'); element.type = "range"; element.min = myObject.min; element.max = myObject.max; element.step = myObject.step; valueDiv.className = myObject.type + "_value"; elementDiv.appendChild(valueDiv); element.defaultValue = myObject.init; //value does not show up in HTML simply because the attribute does not exist valueDiv.innerHTML = myObject.init; element.oninput = function() { //use oninput to get values continously during changing (onchange only gives value after mouseup) valueDiv.innerHTML = this.value; //display changed value } element.onchange = function() { //use onchange to define an action after release (mouseup) of the slider) valueDiv.innerHTML = myObject.init; //display changed value // code here to let the element show the position that reflects element.defaultValue // this position is only shown after loading the page //code here //send changed value }Uso el evento element.oninput para mostrar continuamente el valor cambiante en valueDiv cuando dibujo el control deslizante. El evento element.onchange se activa cuando se suelta el control deslizante (con el mouse hacia arriba). El valueDiv luego muestra el valor inicial (element.defaultValue). Quiero que la posición del control deslizante refleje este valor inicial. No descubrí una acción/función del elemento hacer eso.
Acabo de encontrar la respuesta aquí:
¿Cómo puedo actualizar la posición de un control deslizante de entrada de rango a través de vanilla js? por Scott Marcus
Cuando agrego element.value = myObject.init, el control deslizante salta a la posición que se ajusta al valor init.