jQuery 슬라이더가 서로를 제어합니다.

Question

jQuery로 두 개의 슬라이더를 만들었지 만 각 슬라이더가 다른 슬라이더를 제어합니다. 어떻게 해결할 수 있습니까? 당신이 var handleVal = $(".slider-bar").slider("value");을 말할 때 모두 동일한 class = "slide-bar" 속성을 가지고 있기 때문에

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

는 페이지의 모든 슬라이더가 선택됩니다.

$(".slider-bar") 대신 $this을 사용하십시오.