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!

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