JQuery UI 반응 슬라이더 (슬라이더 변경시 동시에 다중 슬라이더 업데이트)

Question

JQuery UI에서 슬라이더의 slide 및 change 이벤트에서 여러 슬라이더를 동시에 업데이트하려고합니다.

$(function() { 
    var totalSliders = 0; 
    $(".slider").each(function() { 
     var value = parseInt($(this).text(), 10); 
     $(this).empty().slider({ 
      value: value, 
      range: "min", 
      animate: true, 
      orientation: "horizontal", 
      slide: updateSliders, 
      change: updateSliders 
     }); 
     totalSliders++; 
    }); 

    function updateSliders(event, ui) { 
     var activeSlider = this; 
     $(".slider").slider("value", $(activeSlider).slider("value")); 
    }; 

    $("#update").click(function() { 
     $(".slider").slider("value", 10); 
     return false; 
    }); 
}); 

이 슬라이더로 slider의 클래스와 모든 전환에 성공 :

나는 다음과 같은 코드가 있습니다. 나는 슬라이더를 이동 할 때마다 그러나, 나는 다음과 같은 오류가 발생합니다 : updateSliders(event, ui)의 다음 구현이 잘 작동

function updateSliders(event, ui) { 
    var activeSlider = this; 
    $(".slider").not(activeSlider).slider("value", $(activeSlider).slider("value")); 
}; 

:

Uncaught RangeError: Maximum call stack size exceeded

는 또한 updateSliders의 다음 구현을 시도했습니다

function updateSliders(event, ui) { 
    console.log($(this).slider("value")); 
}; 

질문 :
어떻게 피할 수 있습니까? 최대 호출 스택 크기 오류? 모든 슬라이더가 동시에 업데이트되기를 바랍니다.

편집 : 그 차이를 만드는 경우
가 난 단지, slider의 클래스와 페이지의 세 가지 요소가있다.

Answer 1

그 핸들러 수정 시도 : 이제

function updateSliders(event, ui) { 
    if (!event.originalEvent) return; 
    var activeSlider = this; 
    $(".slider").slider("value", $(activeSlider).slider("value")); 
}; 

는 그 코드 일부 다른 문제가 발생할 수 있습니다을 것 같아요,하지만 널 (null)를 확인하여 "originalEvent은"속성 당신이 말할 수있는 때 "변화" 처리기가 프로그래밍 방식의 업데이트로 인해 호출되고 있습니다. 그러면 그 기능으로 인해 발생하는 모든 업데이트가 계속해서 더 큰 변화를 일으킬 수 있습니다.

Here은 jsfiddle입니다.