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);
        }
    });

});     

Answer 2

( WORKING version of this post )

1. you forgot "move" content (div with class "scroll-content" in slider)
2. changed ( scroll down = look new photos)

3. fixed values for content and slider

   setTimeout( sizeScrollbar, 10 );//safari wants a timeout
   
   $( ".scroll-pane" ).mousewheel(function (event, delta, deltaX, deltaY) {    
       event.preventDefault();
   
       var 
           value = scrollbar.slider( "option", "value" ),  // Get position of slider (% of 100%)
           value2 = scrollbar.slider( "option", "value" ), // Get position of slider (% of 100%)
   
           scrollSpeed = 75,
           widthFull = 2000;   // variable (for help: getimagesize, widthNow += ImgWidth, widthFull += widthNow)
           scrollLimit = (-1) * widthFull + innerWidth;    // innerWidth - browser's width
   
   
       value = (-1) * (value / 100) * widthFull  + delta * scrollSpeed;
       value > 0 && (value = 0);                           // 'left' limit
       value < scrollLimit && (value = scrollLimit);       // 'right' limit
   
       $(".scroll-content").css('margin-left', value );    // Setter for content
   
   
       value2 += -1 * delta * ( 100 / (widthFull / scrollSpeed) ); //100% / (count of times want to scroll)
       value2 < 0 && (value2 = 0);
       value2 > 100 && (value2 = 100);
   
       scrollbar.slider( "option", "value", value2 );   // Setter for slider
   });
   

Answer 3

I found a solution to this problem, may be useful to someone.

setTimeout( sizeScrollbar, 10 );//safari wants a timeout
$( ".scroll-pane" ).mousewheel(function (event, delta, deltaX, deltaY) {event.preventDefault();
   var value = scrollbar.slider( "option", "value" );
   value -= delta;
   value > 100 && (value = 100);
   value < 0 && (value = 0);
scrollbar.slider( "option", "value", value );
        });

 });

Just needed to add wrapper blocks to my code. Thank all.

JsFiddle link