Блог

Я работаю над шаблоном, который мог бы содержать один или несколько ползунков jQuery UI.

Могу ли я инициализировать все слайдеры из одного скрипта, если настройки для каждого хранятся в атрибуте data-options или data-id на входе?

HTML был бы чем-то вроде:

 <label for="amount">Amount <input type="text" id="amount" data-id="5000" class="ui-slider-input" readonly />
  <div class="max-slider"></div>
</label>
  

У меня это делает один элемент, подобный этому:

 var sliderInput = $('#amount');
var sliderDiv = sliderInput.next('.max-slider');
var sliderMax = sliderInput.attr('data-id');
sliderDiv.slider({
  range: "min",
  value: sliderMax,
  min: 0,
  max: sliderMax,
  step: 10,
  slide: function( event, ui ) {
    sliderInput.val( ui.value );
  }
});
sliderInput.val( sliderMax ) );
  

Но я хотел бы инициализировать несколько ползунков, каждый с разным значением max и step.

Вы можете просто выполнить итерацию с each()

 var options = {
    range : "min",
    min   : 0,
    step  : 10,
    slide : function( event, ui ) {
        $(this).prev().val( ui.value );
    }
}

$('.sliders').each(function() {
    $(this).slider(
        $.extend({}, options, {
            value : $(this).data('id'),
            max   : $(this).data('id'),
        })
    );
});