Thanoo Thanoo - 1 year ago 141
Ajax Question

how to implement ionRangeSliders dynamically

I have implemented ionRangeSlider to show some values to users through sliders. To implement a slider we have to declare a input tag like this,

<input type="text" id="range_26" />

after that we must call the id of the input tag via jquery to get the slider.

type: "single",
grid: true,
min: 0,
max: 100,
postfix: "%",
onFinish: function(data) {
//ajax content

For single instance it works fine. Some times I have to implement more than one slider according to database content to show the values. But this time it won't work because for every input tag we have to call the id of the tag to get the slider.

I'm fetching data to page via ajax (because my case i have to fetch the data via jquery to show the real time data, so i have to do it through jquery,ajax)

url: 'sitePagefunction.php',
type: 'post',
data: { 'sitePageId' : sitepageid },
success:function(data) {

In sitePagefunction.php i'm echoing (for the demostration purpose i'm just showing the related things only)


echo '<div class="inputRange">
<input type="text" id="range_26" />


Here you can see if the while condition runs one time than it won't be problem but if this condition runs more than one time that it will be a problem. This while statement running dynamically according to database content. So, I can't say the exact slider counts.

I want create silders dynamically.

How to solve this problem. (I think you may understand what i'm saying. If not please leave a comment below.)

Answer Source


<div class="wrap"></div>

JS updated

// append html dynamically
for(var i = 1; i < 5; i++) {
  $('<div><input type="text" class="my-class" data-min="'+ (i * 4) +'" data-max="'+ (i * 8) +'" /></div>')

  type: "single",  
  grid: true,
  min: $(this).data('min'),
  max: $(this).data('max')