jQuery sliders control each other

Question

Hello, I have created two sliders with jQuery but each slider controls the other, how can I resolve this?

$(function() {  
$.extend($.ui.slider.defaults, { 
    handle:    ".slider-handle",
    min:        0,  
    max:        45,  
    start:      function(e,ui){ },  
    slide:      function(e,ui){  
                    var handleVal = $(".slider-bar").slider("value");    
                    $(".slider-handle").css('left', handleVal);  
                },  
    stop:       function(e,ui){  
                    if($(".slider-handle").position().left >= 38){  
                        $(".slider-handle").animate({left: 44}, 200 );  
                    }  
                    else {  
                        $(".slider-handle").animate({left: 0}, 200 );  
                    }  
                }),  

    $("#slider1").slider();  
    $("#slider2").slider();  
});

Answer 1

When you say var handleVal = $(".slider-bar").slider("value");, all the sliders on the page are selected because they all have the same class = "slide-bar" property.

Instead of $(".slider-bar"), use $this.