Jquery Ui Slider -> With Mousewheel Support?

as you may already know I'm new to jQuery, so Code-Improvements not belonging to this theme are still very allowed. This is my HTML-Code:

).bind('mousewheel DOMMouseScroll', function (e) { var delta = 0, element = $(this), value, result, oe; oe = e.originalEvent; // for jQuery >=1.7 value = element.slider('value'); if (oe.wheelDelta) { delta = -oe.wheelDelta; } if (oe.detail) { delta = oe.detail * 40; } value -= delta / 8; if (value > 100) { value = 100; } if (value < 0) { value = 0; } result = element.slider('option', 'slide').call(element, e, { value: value }); if (result !== false) { element.slider('value', value); } returnfalse; });

EDIT: changed #slider to #bananas

EDIT2: added triggering slide event

Because you are using only value property I pass for parameter object with only this property. If you will need something more, remember to add it to the mousewheel code.

EDIT3: added change cancelling ability when slide function returns false (just like in the documentation)

UPDATE: delta shows not only the wheel direction, but also has a deeper meaning. It describes number of pixels to scroll. The default setting for scrolling is 3 lines which is 120 pixels, but it can differ. If you want to retrieve only direction of wheel, change this:

value -= delta / 8;

to this:

value-=(delta>0)?5 :(delta<0)?-5:0;

although delta === 0 should never occur.

UPDATE: Added part for newer versions of jQuery (e.originalEvent).

Solution 2:

I haven't used the mousewheel plugin before but from what I've seen it should be used like this:

$("#DivName").mousewheel(function(event, delta) {
     //Trigger slide event//Prevent the default mouse wheel
      event.preventDefault();

});

With DivName probably being your slider and I believe Delta is the scroll direction (in units) So I would guess negative is up, positive down.

Solution 3:

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>var slider = $('[your selector ]');
slider.lightSlider();
slider.on('mousewheel', function(e) {
    if (e.deltaY > 0) {
        slider.goToPrevSlide();
    } else {
        slider.goToNextSlide();
    }
    e.preventDefault();
});
</script>

Share