jquery one slider controls another

Question

How do I make one jquery ui slider control another? If I slide slider #1, it should slide slider #2 also.

Answer 1

Supply a slide/change function when you create slider one, that uses the ui.value of the handle being changed on slider one and sets the handle value on slider2. Depending on how many handles your sliders have you'll need to adjust the following:

Note I haven't tried this so you may need to tweak it some.

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