slider - speed - Controles deslizantes jQuery UI en dispositivos táctiles

swiper slider speed

Question

Estoy desarrollando un sitio web usando jQuery UI, y hay varios elementos en mi sitio que parecen ser incompatibles cuando se ven en dispositivos con pantalla táctil; no causan ningún error, pero el comportamiento no es el correcto.

Los elementos en cuestión son controles deslizantes y rangeliders definidos por jQuery UI; en la pantalla táctil, en lugar de registrar un toque como levantar una manija y arrastrar como arrastrar la manija a través del deslizador, simplemente desliza toda la página web al costado de la pantalla. Funciona si toca el mango y luego toca la ubicación en el control deslizante donde desea que termine el control, pero esto es muy lento y no es ideal. ¿Algunas ideas?

Intenté descargar el complemento jqtouch y luego adjuntar .touch([...]) a todas las llamadas a slider () y rangeslider (), pero eso no funcionó.

¡Gracias!

ACTUALIZACIÓN: Encontré este "parche" en el sitio web jQuery UI

http://bugs.jqueryui.com/ticket/4143

eso dice que facilita el deslizador en el iPhone, pero ahora otra pregunta estúpida: ¿cómo incorporo este "parche" en mi código? ¿Acabo de incluirlo al principio del código como un complemento?

Answer 1

Como sugirió @dazbradbury, la biblioteca touchpunch puede ayudar a traducir los eventos del mouse para tocar eventos. Los parámetros en .draggable () limitan el movimiento del deslizador por lo que no se puede mover más allá de su control deslizante principal.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(".ui-slider-handle").draggable({ 
    axis: "x",
    containment: "parent"
});
</script>

EDITAR: si ya está usando un control deslizante de UQ de Jquery , solo necesita incluir la biblioteca de toque táctil. No llame a .draggable () para .ui-slider-handle porque sobrescribirá la funcionalidad existente.

Answer 2

Esta biblioteca parece ofrecer lo que estás buscando:

https://github.com/furf/jquery-ui-touch-punch#readme

También tiene algún código de uso de ejemplo (simplemente agrega el complemento):

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
  $(''#widget'').draggable();
</script>

Answer 3

Solo quería agregar algo de información nueva sobre esto. Touch-punch funcionará bien para dispositivos Ipads y Android. Pero el control deslizante no funcionará en dispositivos móviles con Windows, hasta donde puedo probar (con las últimas versiones de jquery ui y Touch punch)

La solución es bastante simple, solo agrega las siguientes reglas de CSS al .ui-slider-handle:

-ms-touch-action: none;
touch-action: none;

Espero que esto ayude

Answer 4

Yo tuve el mismo problema. Desarrollé una construcción de interfaz gráfica de usuario elaborada en el control deslizante de jQuery UI solo para darme cuenta de que no funciona en absoluto en los dispositivos móviles. Probé las sugerencias que se enumeran aquí, pero como tengo una solución personalizada que solo está basada en el control deslizante de jQuery UI, no funcionó.

Solo use noUiSlider .

Tiene todas las funciones elaboradas (y mucho más) como la que construí encima del control deslizante jQuery UI. Funciona muy bien en dispositivos móviles y es fácil de diseñar también.