Как синхронизировать несколько слайдеров jQuery?

Question

Я использую этот jquery слайдер , есть 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

Вы можете синхронизировать несколько слайдеров, которые совместно используют один и тот же класс, используя .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
        });
    }
});

Это также работает, если вы используете опцию range, просто обязательно используйте метод «values» вместо «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
        });
    }
});