Les curseurs jQuery se contrôlent les uns les autres

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

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

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