Слайдеры jQuery контролируют друг друга

Question

Я создал два слайдера с помощью jQuery, но каждый слайдер управляет другим, как я могу решить эту проблему?

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

Когда вы говорите var handleVal = $(".slider-bar").slider("value");, все ползунки на странице выбираются, поскольку все они имеют одинаковое свойство class = "slide-bar".

Вместо $(".slider-bar") используйте $this.