Comment synchroniser plusieurs curseurs jQuery?

Question

J'utilise ce jquery slider, il y a 3 instances de ce curseur, comment puis-je les synchroniser?

js:

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

html:

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

Answer 1

attribuer une autre ID à chaque:

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

puis sur votre initialisation du curseur:

$("#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

Vous pouvez synchroniser plusieurs curseurs qui partagent la même classe en utilisant trop .each():

$('.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 
     }); 
    } 
}); 

Il fonctionne également si vous utilisez l'option de gamme, juste être sûr d'utiliser la méthode « valeurs » au lieu de 'valeur':

$('.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 
     }); 
    } 
});