触摸设备上的jQuery UI滑块
我正在开发一个使用jQuery UI的网站，在我的网站上有几个元素在触摸屏设备上查看时显示为不兼容; 他们不会造成任何错误，但行为不是它应该的。
有问题的元素是由jQuery UI定义的滑块和范围滑块; 在触摸屏上，而不是将触摸logging为拾取手柄，拖动手柄拖动滑块，而是将整个网页滑动到屏幕侧面。 如果您点击手柄，然后点击滑块上您希望手柄最终位置的位置，它也可以工作，但这非常缓慢而不理想。 有任何想法吗？
我尝试下载jqtouch插件，然后将.touch([...])附加到滑块（）和rangeslider（）的所有调用，但没有奏效。
谢谢！
更新：我在jQuery UI网站上find了这个“补丁”
http://bugs.jqueryui.com/ticket/4143
这表示它促进了iPhone上的滑块，但现在另一个愚蠢的问题：我如何将这个“补丁”纳入我的代码？ 我只是将其包含在代码的开头，就像插件一样？
这个图书馆似乎提供你正在寻找的东西：
https://github.com/furf/jquery-ui-touch-punch#readme
它也有一些示例使用代码（只需添加插件）：
<script src="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>
只是想添加一些关于这个的新信息。 对于iPad和Android设备，触摸打卡function可以正常工作。 但滑块将无法在Windows移动设备上工作，到目前为止我可以testing（最新版本的jQuery UI和触摸打孔）
修复很简单，只需将下面的CSS规则添加到.ui-slider-handle：
-ms-touch-action: none; touch-action: none;
希望这可以帮助
正如@dazbradbury所说， touchpunch库可以帮助翻译鼠标事件来触摸事件。 .draggable（）中的参数限制滑块的移动，因此不能移动到其滑块父级之外。
<script src="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滑块 ，你只需要包括touchpunch库。 不要为.ui-slider-handle调用.draggable（），因为它会覆盖现有的function。
我有同样的问题。 我在jQuery UI的滑块上开发了一个精致的滑块UI，只是为了实现它在移动设备上根本不起作用。 我尝试了这里列出的build议，但由于我有一个只基于jQuery UI滑块的自定义解决scheme，它没有工作。
只用noUiSlider 。
它完成了所有精巧的function（以及更多），我在jQuery UI滑块之上构build了一个。 它运行在移动设备上很漂亮，也很容易风格。
滑块使用函数$('#your_slider_id').slider();
