タッチデバイスのjQuery UIスライダー

jQuery UIを使用してWebサイトを開発していますが、タッチスクリーンデバイスで表示すると互換性がないように見えるサイトの要素がいくつかあります。エラーは発生しませんが、動作は本来あるべきものではありません。

問題の要素は、jQuery UIで定義されているスライダーと範囲スライダーです。タッチスクリーンでは、ハンドルをつかんでタッチを登録し、スライダーを横切ってハンドルをドラッグしてドラッグを登録する代わりに、Webページ全体を画面の端にスライドさせます。ハンドルをタップしてから、スライダーのハンドルを配置する場所をタップすると機能しますが、これは非常に遅く、理想的ではありません。何か案は？

jqtouchプラグインをダウンロードして、.touch([...])slider（）とrangeslider（）へのすべての呼び出しにアタッチしようとしましたが、うまくいきませんでした。

ありがとう！

更新：jQuery UI Webサイトでこの「パッチ」を見つけました

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

それはiPhoneのスライダーを容易にすることを意味しますが、ここで別の愚かな質問があります：この「パッチ」をコードに組み込むにはどうすればよいですか？プラグインのようにコードの先頭に含めるだけですか？

このライブラリはあなたが探しているものを提供しているようです：

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

また、いくつかの使用例のコードがあります（プラグインを追加するだけです）：

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

これに関するいくつかの新しい情報を追加したかっただけです。タッチパンチはiPadsとAndroidデバイスで正常に動作します。しかし、私がテストできる限り、スライダーはWindowsモバイルデバイスでは機能しません（jquery uiとタッチパンチの最新バージョンで）

修正は非常に簡単です。次のCSSルールを.ui-slider-handleに追加するだけです。

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

お役に立てれば

@dazbradburyが示唆したように、touchpunchライブラリはマウスイベントをタッチイベントに変換するのに役立ちます。.draggable（）のパラメーターはスライダーの移動を制限するため、スライダーの親を超えて移動することはできません。

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

編集：すでにJquery UIスライダーを使用している場合は、タッチパンチライブラリを含めるだけで済みます。既存の機能が上書きされるため、.ui-slider-handleに対して.draggable（）を呼び出さないでください。

私も同じ問題を抱えていました。私はjQuery UIのスライダーをベースにした精巧なスライダーUIを開発しましたが、モバイルではまったく機能しないことに気づきました。ここにリストされた提案を試しましたが、jQuery UI Sliderのみに基づくカスタムソリューションがあるため、機能しませんでした。

noUiSliderを使用するだけです。

jQuery UIスライダーの上に構築したものと同じように、すべての精巧な機能（およびそれ以上）を実行します。モバイルデバイスで美しく機能し、スタイルも簡単です。