How to generate dynamic slider with dynamic minimum and maximum value

How to generate dynamic slider with dynamic minimum and maximum value

Hello everyone,

 I have trying to implement dynamic slider with different range values for last three days. But failed to implement. I also tried to get help from this forum and from other websites but didn't find anything helpful. Finding no other option, i am posting this here.

What i am trying to implement:

I implemented a module from admin to set slider options for multiple attribute with their minimum and maximum values. Using php code i am displaying their minimum and maximum values dynamically.

At the same time i am trying to implement multiple sliders dynamically.



PHP code to get the slider:

<?php

 while($refine=mysql_fetch_object($refine_attr))
 {
    $id=$refine->id;
$slider_min_value=$refine->min_value;
$slider_max_value=$refine->max_value;
?>

<div id="slide_section">
<div id="min_value<?php echo $id;?>"><?php echo $slider_min_value?></div>
<div id="max_value<?php echo $id;?>"><?php echo $slider_max_value?></div>       
<div style="clear:both;"></div>
<div id="slider<?php echo $id;?>"></div>
</div>

<?php
}
?>


Javascript:

 for(var M=0; M <= (all_s_type_id_list.length - 1); M++)    // all_s_type_id_list.length indicates the id  numbers. It's an array.
 {
       
         var id=all_s_type_id_list[M];

         var MIN=document.getElementById("min_value"+id).innerHTML;
         var MAX=document.getElementById("max_value"+id).innerHTML;
         
                  $("#slider"+id).slider(
                          {

                          min: MIN, max: MAX ,values: [MIN,MAX],
                       slide: function(event, ui) {

                                         
                      var val1 = $("#slider"+id).slider("values", 0);
                  //  alert(val1);
                      
                      var val2 = $("#slider"+id).slider("values", 1);   
                  
                       document.getElementById("min_value"+id).innerHTML=val1;              
                      document.getElementById("max_value"+id).innerHTML=val2;
                  
                       if(val1 > val2)
                       {
                           alert("Min value can not be grater than max value");
                           $("#slider"+id).slider({ min: MIN, max: MAX ,values: [MIN,MAX]});                                      
                       }
                      
                       }

                        
                     });

                        
        }


The php code is working fine. But failing to generate multiple slider.

Any help will be appreciable.