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

Question

我在我的网站上使用这个插件：

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

右侧的范围滑块(按价格筛选、摄像头等)在基于鼠标的系统上运行良好，但在iPhone、iPad、Android等触摸设备上使用很糟糕。。。你不能用手拖动它。

我如何使这个插件在触摸设备中工作？

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>