如何同步幾個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 
     }); 
    } 
});