Evite el evento mousedown en el elemento html de rango de entrada y aún así permita que el usuario arrastre el deslizador

Entonces, ¿hay alguna forma de deshabilitar mousedown y / o hacer clic en event en el elemento de rango de entrada, pero al mismo tiempo, dejar que el usuario arrastre el control deslizante y aún iniciar el evento de cambio? Desactive hacer clic en la línea pero aún así habilitar el deslizador para arrastrarlo. Me gustaría evitar que los usuarios salten (con el mousedown / clic) en el medio del control deslizante, pero quiero dejar que lo arrastren para que el valor cambie.

 

Esto no ayuda, ya que en el cambio se llama el rango y se arruinan los números.

 $slider.on('mousedown', function(event) { //event.preventDefault(); this.value = -1; /* Act on the event */ console.log("mousedown"); }); $slider.on('click', function(event) { event.preventDefault(); this.value = -1; /* Act on the event */ console.log("click"); }); 

Si llamo a event.preventDefault (); El control deslizante de mousedown no funciona y no se puede arrastrar. Hay alguna manera de evitar eso.

Intento recrear este efecto en html ¿hay algún efecto jquery para este tipo de zoom?

Puede usar CSS pseudos-classes para dar el thumb de los pointer-events:auto input pointer-events:auto (permitir eventos de mouse) y dar al rest del rango input pointer-events: none (no permite eventos de mouse).

La documentación para pointer-events de pointer-events establece que:

La propiedad CSS de eventos de puntero especifica bajo qué circunstancias (si hay alguna) un elemento gráfico en particular puede convertirse en el objective de los eventos del mouse.

Puntero-Eventos: auto

El elemento se comporta como lo haría si no se especificara la propiedad de eventos de puntero. En el contenido SVG, este valor y el valor visiblePintado tienen el mismo efecto.

Puntero-Eventos: ninguno

El elemento nunca es el objective de los eventos del mouse; sin embargo, los eventos del mouse pueden apuntar a sus elementos descendientes si esos descendientes tienen eventos de puntero configurados en algún otro valor. En estas circunstancias, los eventos del mouse desencadenarán escuchas de eventos en este elemento padre según corresponda en su camino hacia / desde el descendiente durante las fases de captura / burbuja de eventos.

 input[type=range]{ pointer-events: none; } input[type=range]::-webkit-slider-thumb{/*Webkit Browsers like Chome and Safari*/ pointer-events: auto; } input[type=range]::-moz-range-thumb{/*Firefox*/ pointer-events: auto; } input[type=range]::-ms-thumb{/*Internet Explorer*/ pointer-events: auto; } 
  

Aquí hay una solución pura de CSS

Puede controlar partes del rango con CSS y de esa manera desactivar los eventos del puntero para todas esas partes excepto el thumb del control deslizante. De esta forma, los eventos de clic solo se registran cuando se hace clic en el botón del control deslizante.

 pointer-events: none; // disable all event on the range 

Utilice los selectores de pseudo-clase para orientar el pulgar y cubrir todos los principales navegadores como este.

 input[type=range]::-webkit-slider-thumb { // support webkit (eg Chrome/Safari) input[type=range]::-moz-range-thumb { // support for Firefox input[type=range]::-ms-thumb // support for IE 

Así es como se vería eso en acción.

 $("#slider").on('mousedown', function(event) { console.log('Mouse-down: only fired when thumb of the range is clicked'); }); $("#slider").on('mouseup', function(event) { console.log('Mouse-up: only fired when thumb of the range is clicked'); }); 
 input[type=range] { pointer-events: none; } input[type=range]::-webkit-slider-thumb { pointer-events: auto; } input[type=range]::-moz-range-thumb { pointer-events: auto; } input[type=range]::-ms-thumb { pointer-events: auto; } 
   

Podría usar CSS puro

 #slider { pointer-events: none; } 

Aquí está mi bash:

 //First block control click + move event var current_value = $("#slider").val(); $("#slider").on('mousedown', function(event) { $("#slider").on("mousemove", function (e) { if ($("#slider").val() == parseInt(current_value)+1 || $("#slider").val() == parseInt(current_value)-1) { current_value = $(this).val(); } else { $("#slider").val(current_value); } }) }); //Second block control click on line $("#slider").on("mouseup", function() { if ($("#slider").val() == parseInt(current_value)+1 || $("#slider").val() == parseInt(current_value)-1) { current_value = $(this).val(); } else { $("#slider").val(current_value); } }) 

NB: si te mueves para acelerar el control deslizante, saltará el paso, y luego volverá a la posición inicial.

JSFiddle: https://jsfiddle.net/xpvt214o/674502/

¿Por qué no usar ” mouseup ” en lugar de ” click “?

 $("#slider").on('mousedown', function(event) { //event.preventDefault(); /* Act on the event */ console.log("mousedown", this.value); }); $("#slider").on('mouseup', function(event) { //event.preventDefault(); /* Act on the event */ console.log("mouseup", this.value); }); 

¿Es esto lo que estás tratando de lograr? Experimenta con el violín si lo deseas. 🙂