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不支持touch .你应该把它和jQuery-ui touch punch一起使用.

只需在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>

您也可以使用CDNJ:

<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相关问答推荐

使用jquery将外部代码插入div

如何在外部JS文件中使用带有参数的laravel路由

Bootstrap 4 多选下拉菜单

未捕获的类型错误:$.post 不是函数

在页面加载之间保持变量

如何滚动到AngularJS中的页面顶部?

如何正确卸载/销毁 VIDEO 元素

Chart.js 中饼图的点击事件

使用 jQuery 更改 .prop 不会触发 .change 事件

通过单击按钮获取表格行的内容

如何使用 jQuery 或纯 JavaScript 获取 URL 参数?

jquery - 单击事件不适用于动态创建的按钮

Jquery判断元素是否在视口中可见

Codemirror 编辑器在单击之前不会加载内容

moment.js isValid 函数无法正常工作

jQuery获取图片src

即时替换 css 文件(并将新样式应用于页面)

使用 时如何从 select2 中获取选定文本

用作 Google Chrome 书签

jQuery $.cookie 不是一个函数