Multiple range sliders?

Multiple range sliders?

Forgive me here if this is a basic question but I had a look at both multiple sliders and slider range and can't figure out how to combine them so I can have more than one range slider on the page. I currently have this code:

  2. $(function() {
  3. $( ".slider-range" ).slider({
  4. range: true,
  5. min: 0,
  6. max: 500,
  7. values: [ 75, 300 ],
  8. slide: function( event, ui ) {
  9. $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
  10. }
  11. });
  12. $( "#amount" ).val( "$" + $( ".slider-range" ).slider( "values", 0 ) +
  13. " - $" + $( ".slider-range" ).slider( "values", 1 ) );
  14. });
I then have this to display the slider and range:

  2. <div class="slider">
  3. <p>
  4. <label for="amount">Price range:</label>
  5. <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
  6. </p>
  7. <div class="slider-range"></div>
  8. </div>

But I would then like to add a couple more sliders with different values.

Any help would be greatly appreciated.