CODEWITHSUNDEEP
jqueryslider
Badri
Badri

Reputation: 2262

jquery one slider controls another

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

Upvotes: 2

Views: 1365

Answers (1)

tvanfosson
tvanfosson

Reputation: 532755

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

Upvotes: 1

Related Questions