Mouse wheel control in jQuery UI Slider scrollbar

Question

I have modified jQuery UI Slider Scrollbar for my needs. There is the original version of slider http://jqueryui.com/slider/#side-scroll1

I have html

<div class="ui-slide-range">
    <div id="sliderContent">        
        <div class="viewer ui-corner-all">
            <div class="content-conveyor ui-helper-clearfix">
                <div class="item">
                    <img src="img/item4.jpg" height="152" width="205" alt="">   
                </div>
            </div>
       </div>
       <div id="slider"></div>
    </div>
</div> 

And jQuery code

$(function() {

//vars
var conveyor = $(".content-conveyor", $("#sliderContent")),
item = $(".item", $("#sliderContent"));

//set length of conveyor
conveyor.css("width", item.length * parseInt(item.css("width")));

    //config
    var sliderOpts = {
  max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
      slide: function(e, ui) { 
        conveyor.css("left", "-" + ui.value + "px");
      }
    };

    //create slider
    $("#slider").slider(sliderOpts);
  });

$( "#slider" ).slider({
            range: "min",
            value: 1,
            slide: function() {
                update();
            }
}); 

How can I add mousewheel action for this slider? I used search, and find a lot of questions, but answers dont help me. Here are links to some questions. Question1 Question2

I've been working on this for a whole day, I can not in any way solve the problem, please help.

The JsFiddle link is here

Answer 1

DEMO jquery ui slider with mousewheel support using jquery mousewheel plugin

code:

$(function() {
    var value;
    $( "#slider" ).slider({
        slide: function( event, ui ) {
            value = $( "#slider" ).slider( "value" );
            $('#slider_val').html(value);
        }
    });

    value = $( "#slider" ).slider( "value" );
    $('#slider_val').html(value);

    $('#slider').on('mousewheel', function(event) {
        event.preventDefault();
        value = $( "#slider" ).slider( "value" );

        //console.log(event.deltaX, event.deltaY, event.deltaFactor);

        //Mousewheel Scrolled up
        if(event.deltaY == -1){
            //alert("scrolled down");
            value = value+1;
            $( "#slider" ).slider("value", value);
            $('#slider_val').html(value);
        }
        //Mousewheel Scrolled down
        else if(event.deltaY == 1){
            //alert("scrolled up");
            value = value-1;
            $( "#slider" ).slider( "value", value );
            $('#slider_val').html(value);
        }
    });

});