I have already styled and implemented jQuery UI slider into a project. Though it's responsive, the slider does not respond to being touched and dragged. Instead, you have to touch where you want the slider to go. I'd like to avoid swapping to jQuery mobile UI, which supports touching and dragging, since we already extensively use jQuery (non-mobile) UI.

The functionality we want: Here
What we are using: Here

On a desktop you can't tell the difference. On a mobile device it is apparent.

Anyone know how to add this support to jquery UI?

$("#videographers").slider({
  value: 2,
  min: 1,
  max: 3,
  step: 1,
  slide: function(event, ui) {
    return calcTotal(ui.value);
  }
});

推荐答案

jQuery ui doesn't have touch support. You should use it with jQuery-ui touch punch.

Just add the script after 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>

You can also use 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>

Note: Better give this repo a star on Github.

Jquery相关问答推荐

bootstrap - Select Select 器不能在下拉菜单中 Select

如何在jQuery中判断粘贴剪贴板中字母输入的增加/减少

如何像这样通过 $.ajax ( serialize() + extra data ) 添加数据

自动完成时触发的任何事件?

如何用另一个响应替换窗口的 URL 哈希?

如何使用 AJAX 和 jQuery 发布 django 表单

如何在 jquery 中从这个日期减go 一周?

标识符 (id) 是否有通配符 Select 器?

Jquery .on('scroll')在滚动时不触发事件

scrollIntoView 是否适用于所有浏览器?

字符串化(转换为 JSON)具有循环引用的 JavaScript 对象

使用 JQuery / JavaScript 调用/单击 mailto 链接

jQuery DataTables:延迟搜索直到输入 3 个字符或单击按钮

Javascript 使用哈希值重新加载页面

使用 jQuery 比较两个 Javascript 对象数组

通过 :not 在 jQuery Select 器中隐藏除 $(this) 之外的所有内容

在jQuery中,当它们都具有相同的名称时,如何获取单选按钮的值?

如何使用 jQuery Select 第一个父 DIV?

获取对象属性中的最小值/最大值的快速方法

jQuery UI 选项卡 - 如何获取当前选定的选项卡索引