Deslizadores de interfaz de usuario de jQuery en dispositivos táctiles

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 que debería ser.

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

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

¡Gracias!

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

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

eso dice que facilita el control deslizante en iPhone, pero ahora para otra pregunta estúpida: ¿cómo incorporo este "parche" en mi código? ¿Lo incluyo al principio del código como un complemento?

Esta biblioteca parece ofrecer lo que está buscando:

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

También tiene un código de uso de ejemplo (simplemente agregue 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>

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

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

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

Espero que esto ayude

Como sugirió @dazbradbury, la biblioteca touchpunch puede ayudar a traducir los eventos del mouse en eventos táctiles. Los parámetros en .draggable () limitan el movimiento del control deslizante para que no se pueda 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á utilizando un control deslizante de la interfaz de usuario de Jquery , solo necesita incluir la biblioteca touchpunch. No llame a .draggable () para .ui-slider-handle porque sobrescribirá la funcionalidad existente.

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

Simplemente use noUiSlider .

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