如何同步几个jQuery滑块？

Question

我使用这个jquery slider，这个滑块有3个实例，我如何同步它们？

JS：

$(".slider").slider(); 

HTML：

<div class="slider"></div> 
... 
<div class="slider"></div> 

Answer 1

分配不同的ID给每个：

<div class="slider" id="slider1"></div> 
<div class="slider" id="slider2"></div> 
<div class="slider" id="slider3"></div> 

然后在你的滑块的初始化：

$("#slider1").slider({ 
    slide: function(event, ui) { 
     $("#slider2").slider("value", ui.value); 
     $("#slider3").slider("value", ui.value); 
    } 
}); 

$("#slider2").slider({ 
    slide: function(event, ui) { 
     $("#slider1").slider("value", ui.value); 
     $("#slider3").slider("value", ui.value); 
    } 
}); 

$("#slider3").slider({ 
    slide: function(event, ui) { 
     $("#slider1").slider("value", ui.value); 
     $("#slider2").slider("value", ui.value); 
    } 
}); 

Answer 2

您可以同步共享同一类别中的几种滑块使用过。每（）：

$('.slider.sync').slider({ 
    min:0, 
    max:100, 
    slide: function(event,ui){ 
     $('.slider.sync').each(function(){ 
      $(this).slider('value', ui.value);  
      $(this).siblings('span.value').text(ui.value); // print value to span.value 
     }); 
    } 
}); 

，如果你使用的范围选项，它也可以，只是一定要使用“值”方法来代替的'价值'：

$('.slider.sync').slider({ 
    range:true, 
    min:0, 
    max:100, 
    values:[0,100], 
    slide: function(event,ui){ 
     $('.slider.sync').each(function(){ 
      $(this).slider('values', [ ui.values[0],ui.values[1] ]); 
      $(this).siblings('span.min').text(ui.values[0]); // print min value to span.min 
      $(this).siblings('span.max').text(ui.values[1]); // print max value to span.max 
     }); 
    } 
});