jquery 一个 slider 控制另一个

Question

如何让一个 jquery ui slider 控制另一个？如果我滑动 slider #1，它也应该滑动 slider #2。

Answer 1

在创建 slider 1 时提供滑动/更改函数，该函数使用 slider 1 上正在更改的 handle 的 ui.value 并设置 slider 2 上的 handle 值。根据 slider 的 handle 数量，您需要调整以下内容:

注意我尚未尝试过此操作，因此您可能需要对其进行一些调整。

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