Sliders da jQuery UI em dispositivos de toque

Estou desenvolvendo um site usando jQuery UI e há vários elementos em meu site que parecem ser incompatíveis quando visualizados em dispositivos touchscreen; eles não causam nenhum erro, mas o comportamento não é o que deveria ser.

Os elementos em questão são controles deslizantes e rangeliders conforme definido pelo jQuery UI; na tela de toque, em vez de registrar um toque como pegar uma alça e arrastar como arrastar a alça pelo controle deslizante, ele apenas desliza toda a página da web para o lado da tela. Funciona se você tocar na alça e depois no local do controle deslizante onde deseja que a alça fique, mas isso é muito lento e não é o ideal. Alguma ideia?

Tentei baixar o plugin jqtouch e depois anexar .touch([...])a todas as chamadas de slider () e rangelider (), mas não funcionou.

Obrigado!

ATUALIZAÇÃO: encontrei este "patch" no site jQuery UI

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

que diz que facilita o controle deslizante no iPhone, mas agora outra pergunta estúpida: como faço para incorporar esse "patch" ao meu código? Devo apenas incluí-lo no início do código como um plugin?

Esta biblioteca parece oferecer o que você procura:

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

Ele também tem alguns exemplos de código de uso (basta adicionar o plug-in):

<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>

Só queria adicionar algumas informações novas sobre isso. Touch-punch funcionará bem para Ipads e dispositivos Android. Mas o controle deslizante não funcionará em dispositivos móveis do Windows, pelo que pude testar (com as versões mais recentes do jquery ui e Touch punch)

A correção é bastante simples, basta adicionar as seguintes regras CSS ao .ui-slider-handle:

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

Espero que isto ajude

Como @dazbradbury sugeriu, a biblioteca touchpunch pode ajudar a traduzir os eventos de mouse em eventos de toque. Os parâmetros em .draggable () limitam o movimento do controle deslizante para que ele não possa ser movido além de seu controle deslizante pai.

<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: Se você já estiver usando um controle deslizante de IU do Jquery , você só precisa incluir a biblioteca touchpunch. Não chame .draggable () para o .ui-slider-handle porque isso sobrescreverá a funcionalidade existente.

Eu tive o mesmo problema. Eu desenvolvi uma UI de controle deslizante elaborada com base no controle deslizante da interface de usuário do jQuery apenas para perceber que ele não funciona em dispositivos móveis. Tentei as sugestões listadas aqui, mas como tenho uma solução personalizada baseada apenas no jQuery UI Slider, ela não funcionou.

Basta usar noUiSlider .

Ele faz todos os recursos elaborados (e muito mais), como o que eu construí em cima do controle deslizante de UI do jQuery. Funciona perfeitamente em dispositivos móveis e também é fácil de estilizar.