从mysql获取一行并使用php和Codeigniter中的jquery生成动态范围选择器框

I want to generate a dynamic range selector or progress bar from 1 to 100 when page load. Initial value should be taken from database.

In below jquery #amount will hold the value of progress bar. #slider-range-min will be progress bar div tag. I want to generate this div tag dynamically when page load with t_id from database so my div tag id should be like this slide-range-min-1,slide-range-min-2 etc.

$(function() {
$( "#slider-range-min" ).slider({
  range: "min",
  value: 0,
  min: 1,
  max: 100,
  slide: function( event, ui ) {
    $( "#amount" ).val( ui.value );
  }
});
$( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) );
});

You can do something like this

Your HTML

 <div id="slider_1">
 </div>

 <div id="slider_2">
 </div>

 <div id="slider_3">
 </div>

And your js can be

$('div[id^="slider_"]').each(function(){
   id = $(this).attr('id');
   $(id).slider({
     range: "min",
     value: 0,
     min: 1,
     max: 100,
     slide: function( event, ui ) {
     // code here
  }
});
})

You can also make use of custom data attributes for each div to store initial DB values and give them to slider function