jQuery UI slider Supporto Touch & Drag / Drop su dispositivi mobili

Ho già disegnato e implementato lo slider dell'interfaccia utente jQuery in un progetto. Sebbene sia reattivo, il cursore non risponde se viene toccato e trascinato. Invece, devi toccare dove vuoi che vada il cursore. Vorrei evitare di passare all'interfaccia utente jQuery mobile, che supporta il tocco e il trascinamento, poiché utilizziamo già ampiamente l'interfaccia utente jQuery (non mobile).

La funzionalità che vogliamo: Qui
Cosa stiamo usando: Qui

Su un desktop non puoi dire la differenza. Su un dispositivo mobile è evidente.

Qualcuno sa come aggiungere questo supporto all'interfaccia utente di jquery?

$("#videographers").slider({
  value: 2,
  min: 1,
  max: 3,
  step: 1,
  slide: function(event, ui) {
    return calcTotal(ui.value);
  }
});

jQuery ui non ha il supporto touch. Dovresti usarlo con jQuery-ui touch punch .

Basta aggiungere lo script dopo 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>

Puoi anche usare 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>

Nota: meglio dare a questo repo una stella su Github.

Puoi semplicemente collegare questo js.

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

Grazie.