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のクラスにページ上に3つの要素を持っています。

Answer 1

すると、そのハンドラを変更してみてください。

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

今では、あなたのコードといくつかの他問題を引き起こす可能性があります、私は推測するが、ヌルのために「originalEvent」プロパティをチェックして、あなたの「変更」を伝えることができますハンドラは、プログラムによる更新のために呼び出されています。それは、あなたがやっているすべてのアップデートをその機能から守って、さらに大きな変化を引き起こすのを防ぎます。

Hereはjsfiddleです。