jQuery UI slider Support Touch & Drag / Drop sur les appareils mobiles

J'ai déjà stylisé et implémenté le curseur de l'interface utilisateur jQuery dans un projet. Bien qu'il soit réactif, le curseur ne répond pas au toucher et au glissement. Au lieu de cela, vous devez toucher où vous voulez que le curseur aille. Je voudrais éviter de passer à l'interface utilisateur mobile jQuery, qui prend en charge le toucher et le glisser, car nous utilisons déjà largement l'interface utilisateur jQuery (non mobile).

La fonctionnalité que nous voulons: Ici
Ce que nous utilisons: Ici

Sur un ordinateur de bureau, vous ne pouvez pas faire la différence. Sur un appareil mobile, c'est évident.

Quelqu'un sait comment ajouter ce support à l'interface utilisateur jquery?

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

jQuery ui n'a pas de support tactile. Vous devriez l'utiliser avec jQuery-ui touch punch .

Ajoutez simplement le script aprè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>

Vous pouvez également utiliser 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>

Remarque: mieux vaut donner à ce repo une étoile sur Github.

Vous pouvez simplement lier ce fichier js.

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

Merci.