Jquery UI Slider multiple start

Question

I am working on a template that could have one or more JQuery UI Sliders.

Can I initialize all sliders from a single script if the settings for each are held within a data-options or data-id attribute on the input?

HTML would be something like:

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

I have it doing a single element like this:

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 ) );

But I would like to initialize multiple sliders, each with a different max and step value.

Answer 1

You can just iterate with 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'),
        })
    );
});