jQuery UI range slider sorting mousewheel

Question

I'm sorting items with range slider on my listing page. I want to use mousewheel function for sorting items. How can I use mousewheel on my range 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();
});

How can I implement this to my slider?

Matt Ellen · Accepted Answer · 2019-07-09T14:17:22.610

To move the slider with the mouse wheel, you need to listen for the wheel event.

To get scrolling up to increase the position, you have to reverse the deltaY's sign.

To get the slide function to run you need to do some jiggery pokery as explained here. What I ended up doing was creating a separate function that is called both for slide and change, as you can't trigger slide. Then trigger change in the wheel handler.

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>

Thanks for your help. I tried on https://jsfiddle.net/5oqfbzat/ its runing but when ı implement my code its not running :/ — oerbas, Jul 09 '19 at 14:03
@oerbas I see. The issue is with `slide` not being triggered when the position of the slider changes. I've updated the code to manage that. — Matt Ellen, Jul 09 '19 at 14:17

jQuery UI range slider sorting mousewheel

1 Answers1