Question

我正在研究价格范围滑块。我正在关注jQuery指南并将它们用作参考。

我的问题是我无法在实际滑块上添加可拖动行为。我已经研究并试图添加jquery.ui.touch-punch.min.js，但它并没有解决我的问题。

请参阅下面的代码：

＆＃13;

  $(function() {
    $("#slider-range-min").slider({
      range: "min",
      value: 400,
      min: 400,
      max: 2000,
      slide: function(event, ui) {
        $("#amount").val("£" + ui.value);
      }
    });
    $("#amount").val("£" + $("#slider-range-min").slider("value"));
    $('#slider-range-min').draggable();
});

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

<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>
<p>
  <label for="amount">Maximum price:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

<div id="slider-range-min"></div>

＆＃13;

Answer 1

您需要确保正确加载：

<script src="jquery.ui.touch-punch.min.js"></script>

您当前的代码希望此文件与HTML页面位于同一文件夹中，如果它位于其他位置，则需要更改链接或使用某种形式的CDN。

向滑块添加触摸选项

1 个答案: