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.

Could you show a snippet of HTML that includes more than one slider element, then you will - hopefully - get a solution that's specifically relevant to your situation, and it saves us from creating a second slider... :) — David Thomas
– David Thomas, Commented Oct 22, 2016 at 11:10
@DavidThomas The second or third slider would be identical aside from the id and data-id — user500665
– user500665, Commented Oct 22, 2016 at 11:37

adeneo · Accepted Answer · 2016-10-22 11:49:08Z

2

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'),
        })
    );
});

edited Oct 22, 2016 at 11:49

answered Oct 22, 2016 at 11:12

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user500665 Over a year ago

Can you show this working in a fiddle? When I try the value no longer changes when sliding.

user500665 Over a year ago

Thanks, this works so far. I have updated the Fiddle to be closer to my needs. Can you tell me what I am doing wrong with the max and step values?

adeneo Over a year ago

You have arrays in the attribute, but you probably wanted objects -> jsfiddle.net/adeneo/zxtur473/3

user500665 Over a year ago

Great thanks, I knew I was missing something obvious!

user500665 Over a year ago

Sorry I thought it was working, but it is actually giving TypeError: alignValue.toFixed is not a function while sliding and the sliding is not consistant...?

|

Collectives™ on Stack Overflow

Jquery UI Slider multiple start

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related