Les curseurs jQuery se contrôlent mutuellement

Question

J'ai créé deux curseurs avec jQuery mais chaque curseur contrôle l'autre, comment puis-je résoudre ce problème ?

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

Lorsque vous dites var handleVal = $(".slider-bar").slider("value"); tous les curseurs de la page sont sélectionnés parce qu'ils ont tous la même valeur de class = "slide-bar" propriété.

Au lieu de $(".slider-bar") , utiliser $this .