ы, возможно, уже знаете, я новичок в jQuery, поэтому улучшения кода, не относящиеся к этой теме, по-прежнему разрешены.

Это мой HTML-код:

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

И это мой ужасающий js-код:

$( "#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" );

(вес 200)

Тем не менее, это работает, за исключением одной «маленькой» детали: не с колесом мыши! Я уже узнал, что мне нужно это расширение:https://github.com/brandonaaron/jquery-mousewheel/downloads

Но я действительно абсолютно не представляю, как реализовать это в моем Слайдере (кстати, у меня на сайте 5).

Помогите пожалуйста, спасибо!