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 touchpunch一起使用。

只需在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上给这个仓库一个星星。

您可以只链接此js。

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

谢谢。