javascript - jQuery UI 范围 slider 排序鼠标滚轮

Question

我在列表页面上使用范围 slider 对项目进行排序。我想使用鼠标滚轮功能对项目进行排序。如何在范围 slider 上使用鼠标滚轮？

<c:if test="${not empty facetData and facetData.name eq 'Price'}">
  <c:set var="minAmount" value="0"> </c:set>
  <c:forEach items="${facetData.values}" var="facetValue">
    <c:set var="maxAmount" value="${facetValue.code}"> </c:set>
  </c:forEach>

  <input type="hidden" id="sliderMinValue" value="${minAmount}" />
  <input type="hidden" id="sliderMaxValue" value="${maxAmount}" />
  <div class="price-range-bottom">
    <span>${minAmount}</span>
    <span>${maxAmount}</span>
  </div>
</c:if>

var sliderMinValue = parseInt($('#sliderMinValue').val());
var sliderMaxValue = parseInt($('#sliderMaxValue').val());

var minSelectedValue = sliderMinValue;
var maxSelectedValue = sliderMaxValue;

$("#slider-range-price").slider({
  range: true,
  min: sliderMinValue,
  max: sliderMaxValue,
  title: "dfsdf",
  values: [minSelectedValue, maxSelectedValue],
  slide: function(event, ui) {
    $("#range-price").val(currencyIso + " " + ui.values[0] + ".00" + " - " + currencyIso + " " + ui.values[1] + ".00");
    min = ui.values[0];
    max = ui.values[1];
    $("#amountMin").val(min);
    $("#amountMax").val(max);

    $(this).children("a.ui-slider-handle").first().html('<span class="slider-left-value">' + currencyIso + '&nbsp;' + min + '.00</span>');
    $(this).children("a.ui-slider-handle").last().html('<span class="slider-right-value">' + currencyIso + '&nbsp;' + max + '.00</span>');

  }

});

$("#range-price").val(currencyIso + " " + $("#slider-range-price").slider("values", 0) + ".00" + " - " + currencyIso + " " + $("#slider-range-price").slider("values", 1) + ".00");

});

$('#slider-range-price').mouseup(function() {
  var urlParams = new URLSearchParams(window.location.search);;
  if (location.href.indexOf('?') != -1) {
    var input = $("<input>").attr("type", "hidden").attr("name", "q").val(urlParams.get('q'));
    $('#advanceSearchFilter').append(input);
  }
  $('#advanceSearchFilter').submit();
});

我怎样才能将它应用到我的 slider 上？

Answer 1

要用鼠标滚轮移动 slider ，需要监听wheel事件。

要向上滚动以增加位置，您必须反转 deltaY 的符号。

要运行幻灯片功能，您需要按照说明进行一些拼图游戏 here .我最终做的是创建一个单独的函数，为 slide 和 change 调用，因为你不能触发 slide。然后在 wheel 处理程序中触发 change。

function doSlide(event, ui)
{
  console.log('Put all the stuff you\'d want in the slide function in here');
}

$( function() {
    $('#slider').slider({slide: doSlide, change: doSlide});
    $('#slider').on('wheel', e => { 
      let s = $('#slider');
      let change = -e.originalEvent.deltaY;
      let value = s.slider('value');
      s.slider('value', value + change);
      s.trigger('change');
      e.preventDefault(); 
      return false;
    });
  } );

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider"></div>