1

Tengo el siguente codigo HTML:

<input type="range" id="range_confirm" value="0" min="0" max="100" />

Y el siguente código JavaScript (jQuery):

$("#range_confirm").change(function ()
{
    let drag_value = $(this).val();
    console.log(drag_value)

    if (drag_value < 90) {
        $(this).val(0);
    }
});

Lo que quiero es validar que el usuario haya deslizado todo el input range, desde 0 hasta mínimo el 90% del valor máximo (100)

Es decir, si el usuario se salta directamente al >90 lo devuelva a 0

Si el usuario pasa manualmente de 0 a >90 le permita proseguir

Lo que busco con esto es crear un botón tipo "Desliza para confirmar".

Agradezco de ante mano sus comentarios y respuestas.

1 respuesta 1

1

Yo usaría una combinación de eventos, considerando que:

  • change Se dispara una sola vez al finalizar el cambio de valor
  • input Se dispara varias veces mientras se mueve el selector. A considerar que no detecta todos los pasos, es posible que se salte algunos si el movimiento es muy rápido.

Esto último es un problema que se puede solucionar agregando un rango de tolerancia, un delta que permita establecer un máximo de pasos saltados aceptados.

Con el evento input vamos detectando que no se salten muchos pasados, en caso contrario devolvemos el rango a cero. para esto vamos almacenando el valor anterior una variable oldValue

Luego con el evento change que se ejecutará al final, validamos la correcta posición final del input

range_confirm.addEventListener("change", onchange);
range_confirm.addEventListener("input", oninput);


function onchange(ev){
  if(ev.target.valueAsNumber >= 90){ //aceptamos cualquier número igual o mayor a 90
    console.log("SIII");
  }
  else{ //de no cumplir devolvemos todo a cero
    ev.target.valueAsNumber = 0;
    ev.target.oldValue =0;
     console.log("Nooo");
  }
}

function oninput(ev){
  ev.target.oldValue = ev.target.oldValue || 0;
  
  if(ev.target.valueAsNumber - ev.target.oldValue >30){ //Aplicamos un rango de tolerancia para los pasos, para evitar saltar cuando el range se mueve muy rápido. 
    ev.target.valueAsNumber = 0; //si no cumple, lo devolvemos a cero
  }
  else{ //si cumple, almacenamos el valor antiguo
    ev.target.oldValue = ev.target.valueAsNumber;
  }
  
}
<input type="range" id="range_confirm" value="0" min="0" max="100" step="1" />

1
  • ¡Es exactamente lo que necesitaba! Muchas gracias amigo por tu respuesta no sabes cuanto te lo agradezco
    – Samsepi
    Commented el 14 jul. a las 17:36

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.