[解決済み] jQuery UIスライダー モバイル端末でのタッチ＆ドラッグ＆ドロップ対応

質問

あるプロジェクトでjQuery UIスライダーを実装しました。それは応答的であるが、スライダーはタッチされ、ドラッグされることに反応しない。代わりに、スライダーを移動させたい場所をタッチする必要があります。私たちはすでにjQuery（非モバイル）UIを広範囲に使用しているので、タッチやドラッグをサポートするjQueryモバイルUIへの切り替えは避けたいと考えています。

欲しい機能 ここで

使っているもの ここで

デスクトップでは違いがわからない。モバイル端末では一目瞭然です。

どなたか、jquery UIにこのサポートを追加する方法をご存知ですか？

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

どのように解決するのですか？

jQuery uiはタッチに対応していません。そのため jQuery-ui タッチパンチ .

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>

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>

注意 より良い このレポ をGithubで星を付けてください。