javascript - 如何使 slider 在 iPad 上可触摸？

Question

我的网站上有 3 个滑动条，但我无法在 iPad 上用手指移动它。移动它的唯一方法是点击应该成为下一步的地方。在桌面上工作正常。

$(function() {
    $( "#slider1" ).slider({
      range: "2",
      min: 1,
      max: 2,
      value: 1,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
      }
    });
    $( "#amount" ).val( $( "#slider1" ).slider( "value" ) );
  });

这是CSS文件希望对你有帮助

.ui-slider {
    position: absolute;
    width:279px;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.4em;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    display: block;
}

.ui-slider-horizontal {
    height: 1em;
}
.ui-widget-content {
    background:url("../images/bar.png");
    background-repeat: no-repeat;
}
.ui-state-default {
    background: url("../images/slidet.png");
    background-repeat: no-repeat;
}

Answer 1

包含 TouchPunch 库可能会有所帮助。 http://touchpunch.furf.com/

它有助于提供 jQuery UI 移动兼容性。