Control handle position on one slider with another
Hi there. I'm trying to control the position of the handles on one slider with a different slider. So I have two sliders, and when I move one, the second mirrors what the first is doing.
I'm very new to jquery and feel i'm missing something pretty basic. if anybody could help me out that would be greatly appreciated.
-
<script type='text/javascript'>
$(function(){
$('#normal_form').hide();
$('#slider1').slider({
range: true,
animate: true,
values: [15,65],
step: 5,
slide: function(event, ui){
var values = $('#slider1').slider('values');
var slide_2_vals = $('#slider2').slider('values');
console.log('slider1 = '+values);
console.log('slider2 = '+slide_2_vals);
$('#slider2').slider('option','values',[values[0],values[1]]);
},
});
$('#slider2').slider({
range: true,
animate: true,
values: [15,65],
step: 5,
});
});
</script>
Above I have a bit of debugging in there but main problem is the line "$('#slider2').slider('option','values',[values[0],values[1]]);"
What happens is that the position of the second slider's handles do not update on the slide event of the first slider. Instead, when I click on one of the handles on the second slider, the other handle on the second slider updates to match the first slider.
Sorry if I made this more confusing than it is. any help/explanations would be greatly appreciated. thank you
grant