jquery 1つのスライダーが別のスライダーを制御する

Question

1つのjquery UIスライダーを別のスライダーに制御させるにはどうすればよいですか？スライダー＃1をスライドすると、スライダー＃2もスライドするはずです。

Answer 1

スライダー1を作成するときに、スライダー1で変更されるハンドルのui.valueを使用し、スライダー2でハンドル値を設定するスライド/変更関数を提供します。スライダーのハンドル数に応じて、以下を調整する必要があります。

注これは試したことがないので、微調整する必要があるかもしれません。

<div id='example1' class='ui-slider-1' style="margin:10px;">
<div class='ui-slider-handle'></div>    
</div>

<div id='example2' class='ui-slider-1' style="margin:10px;">
<div class='ui-slider-handle'></div>    
</div>

$('#example1').slider( { slide: moveSlider2 } );
$('#example2').slider( );

function moveSlider2( e, ui ) 
{
    $('#example2').slider( 'moveTo', ui.value );
}