jQuery UI Slider -> with mousewheel support?

Question

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:

<div style="display: inline-block; width: 120px;">
    <div>
        Bananas:
        <br />
        <input id="bananas_amount" />
        <input id="bananas_amount_percent" />
    </div>
    <br />
    <div id="bananas" style="height:200px;"></div>
</div>

And this is my horrifying js-code:

$( "#bananas" ).slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 100,
    value: 20,
    step: 5,
    slide: function( event, ui ) {
        $( "#bananas_amount_percent" ).val( ui.value + " %" );

            // the code displays a percentage by standart, but I need the real value, too:
            var bananas_amount_percent = $( "#bananas_amount_percent" ).val();
            var bananas_amount_percent = bananas_amount_percent.replace(" %", "");
            var bananas_amount = Math.round((weight / 100) * bananas_amount_percent);
            $( "#bananas_amount" ).val( bananas_amount + " g" );
    }
});
$( "#bananas_amount_percent" ).val( $( "#bananas" ).slider( "value" ) + " %" );

// again the real value (else the value would not be updatet on reload-reset)
var bananas_amount_percent = $( "#bananas_amount_percent" ).val();
var bananas_amount_percent = bananas_amount_percent.replace(" %", "");
var bananas_amount = Math.round((weight / 100) * bananas_amount_percent);
$( "#bananas_amount" ).val( bananas_amount + " g" );

(weight is 200)

However, it's working, except one "little" detail: not with the mousewheel! I already found out that I need this extension: https://github.com/brandonaaron/jquery-mousewheel/downloads

But I've really absolutely no idea how to implement this to my Slider (I've 5 on my Site btw).

Help pls, Thx!

Answer 1

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.

Answer 2

The mousewheel plugin is too heavy for its role. I extracted the essence. Works great in all browsers.

$('#bananas').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);
    }
    return false;
});

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).