Question

我在我的网站上使用此插件：

http://codenegar.com/woocommerce-ajax-product-filter/shop/

右侧的范围滑块（按价格筛选，相机等）在基于鼠标的系统上运行良好，但在iPhone，iPad，机器人等触摸设备上使用时非常糟糕......你不能拖动它触摸。

如何让这个插件在触控设备中运行？

Answer 1

您可以使用jQuery UI Touch Punch在触控设备中使用jquery范围滑块。

使用Touch Punch就像1,2一样简单......只需按照以下简单步骤操作：

在您的页面上包含jQuery和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>

在jQuery UI之后及首次使用之前包含Touch Punch。
```
<script src="jquery.ui.touch-punch.min.js"></script>
```

Answer 2

noUISlider是一个跨浏览器，跨平台和跨设备的库，开箱即用，比jQuery UI + touchpunch更轻量级。

Answer 3

To Enable Touch action you include jQuery touch punch js

Include jQuery and jQuery UI on your page.

<script src="jquery-1.7.2.min.js"></script>
<script src="jquery-ui.min.js"></script>   
<script src="jquery.ui.touch-punch.min.js"></script>

如何使jQuery范围滑块触摸友好？

3 个答案: