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

Question

ある 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 );
}