Issues creating multiple jquery-ui sliders

Question

I have about 20 sliders on my page. I initially used on my page but they are not responding nicely on iPad. I am now trying to use the jQuery-UI sliders (with jQuery ui touch punch) but cannot seem to initialize the sliders with the min/max values programatically.

Slider HTML

<div id="clientPackingOutRep" data-min="5000" data-max="50000" data-step="5000" class="slider"></div>

Slider JS

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

$(".slider").each(function(){
  $(this).slider("option", "min", $(this).attr("data-min")); 
  $(this).slider("option", "max", $(this).attr("data-max")); 
  $(this).slider("option", "step", $(this).attr("data-step"));       
});

The sliders get generated but when I try to use any of them this gets spit back to me in console:

Uncaught TypeError: Object 1500006000010000 has no method 'toFixed'.

Any help would be greatly appreciated!

adeneo · Accepted Answer · 2013-09-30 17:09:23Z

1

Those options accept numbers, not strings :

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

$(".slider").each(function(){
  $(this).slider("option", "min", parseInt($(this).data('min'),10)); 
  $(this).slider("option", "max", parseInt($(this).data('max'),10)); 
  $(this).slider("option", "step", parseInt($(this).data('step'),10));       
});

answered Sep 30, 2013 at 17:09

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Collectives™ on Stack Overflow

Issues creating multiple jquery-ui sliders

Slider HTML

Slider JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Slider HTML

Slider JS

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related