jQuery UI slider Suporte para toque e arraste / solte em dispositivos móveis

102

Eu já estilizei e implementei o controle deslizante de UI do jQuery em um projeto. Embora seja responsivo, o controle deslizante não responde a ser tocado e arrastado. Em vez disso, você deve tocar onde deseja que o controle deslizante vá. Eu gostaria de evitar a troca para a UI móvel jQuery, que suporta tocar e arrastar, uma vez que já usamos amplamente a UI jQuery (não móvel).

A funcionalidade que queremos: Aqui
O que estamos usando: Aqui

Em um desktop, você não pode dizer a diferença. Em um dispositivo móvel, é aparente.

Alguém sabe como adicionar esse suporte à IU do jquery?

$("#videographers").slider({
  value: 2,
  min: 1,
  max: 3,
  step: 1,
  slide: function(event, ui) {
    return calcTotal(ui.value);
  }
});
Seth
fonte
2
possível duplicação dos controles deslizantes da interface
Dia

Respostas:

262

jQuery ui não tem suporte para toque. Você deve usá-lo com o soco de toque jQuery-ui .

Basta adicionar o script após jQuery ui:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

Você também pode usar cdnjs:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

Observação: é melhor dar uma estrela a este repo no Github.

nome do usuário
fonte
Isso salva meu dia!
Dr3am3rz
Muito obrigado! Isso realmente salva meu dia !!
Syamsoul Azrien
Sim, também corrigiu um bug em que o controle deslizante não escolhia os valores corretos.
Ronen Festinger
1
funciona como um encanto com dispositivos rails5 android e ios
Stef Hej
ótimo .. funciona perfeitamente .. :) Uma observação é que em dispositivos iOS quando deslizamos o controle deslizante, ele não desliza quando o tocamos, mas quando liberamos o toque dele, ele desliza nesse ponto. alguma ideia de por que isso acontece? você tem alguma solução para isso?
Rahul J. Rane
4

Você pode apenas vincular este js.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

obrigado.

Espada I
fonte
isso fez com que funcionasse muito rápido, muito bom. obrigado
tijnn