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.