Jquery Slider - get every numeric value of the slider? not only on mouseout?

Question

I'm attempting to create a jquery slider that basically makes text fade in and out (and pictures) with the jquery slider and a switch statement. here is the code:

$(function(){
            $sliderValue="";
            // Slider
            $('#slider').slider({
                orientation: "vertical",
                value : 100,
                min: 0,
                max: 100,
                slide: function(event, ui) {
                            $("#slider_value").val(ui.value);
                            //$("p#time1").fadeTo("slow", 0.90);

                      },
                stop: function(event, ui) {
                    $sliderValue=ui.value;
                      }
            });
            $('#slider').bind('slide', function() {
                var sV = $sliderValue;
                switch (sV) { 
                     case 100: 
                     $("p#time1").fadeTo("fast", 1);
                     break; 
                     case 90: 
                     $("p#time1").fadeTo("fast", 0.60);
                     break; 
                     case 80: 
                     $("p#time1").fadeTo("fast", 0.30);
                     break; 
                     case 75: 
                     $("p#time1").fadeTo("fast", 0.00);
                     break; 
                 }
            });


        });

so basically this switch statement only fires on mouse out (lame!) and I don't know why! any tips would be greatly appreciated.

I need it to update as I scroll the slider (without having to stop clicking).

Thanks in advance!

Answer 1

Its not that the switch statement isn't running, its just running with old data.

It looks like you are only ever setting the value of $sliderValue in the stop event. However, you are then using $sliderValue in your switch statement.

I'm also not sure that it is necessary to have to slide events (one set by the bind and one in the initialization. I would change it to look like this.

$(function(){  
        $sliderValue="";  
        // Slider  
        $('#slider').slider({  
            orientation: "vertical",  
            value : 100,  
            min: 0,  
            max: 100,  
            slide: function(event, ui) {  
                        $("#slider_value").val(ui.value);  
                        switch (ui.value) {   
                             case 100:   
                             $("p#time1").fadeTo("fast", 1);  
                             break;   
                             case 90:   
                             $("p#time1").fadeTo("fast", 0.60);  
                             break;   
                             case 80:   
                             $("p#time1").fadeTo("fast", 0.30);  
                             break;   
                             case 75:   
                             $("p#time1").fadeTo("fast", 0.00);  
                              break;
                         }  

                  },  
            stop: function(event, ui) {  
                $sliderValue=ui.value;  
                  }  
        });