title: Review on my multiple JQuery Slider on a page
body: <p>I have successfully placed multiple jquery ui slider on a page and its transalation text too. you can check it live on:
  <a href="http://outsourcingnepal.com/projects/jQuery%20slider/" rel="nofollow">http://outsourcingnepal.com/projects/jQuery%20slider/</a></p>
  
  <p>I have my jquery code as :</p>
  
  <pre><code>var arrLabel1 = new Array('Not Good', 'OK', 'Average', 'Above Average', 'Excellent', 'Outstanding');
  $(function() {
      $( ".slider_control" ).slider({
          value:0,
          min: 0,
          max: 5,
          step: 1,
          slide: function( event, ui ) {
              $( "#slider_" + $(this).attr('rel') ).val( ui.value );
              $( "#label_" + $(this).attr('rel') ).text( arrLabel1[ ui.value ] );
          }
      }).each(function(index){
          $( "#slider_" + (index + 1) ).val( $( this ).slider( "value" ) );
          $( "#label_" + (index + 1) ).text( arrLabel1[ $(this).slider( "value" ) ] );
      });
  });
  </code></pre>
  
  <p>Now i would like to optimize it so that i can be independent of rel attribute.</p>
  
  <p>MY HTML:</p>
  
  <pre><code>&lt;ul class="slider-container"&gt; 
      &lt;li class="ui_slider"&gt; 
          &lt;div class="title"&gt;Overall: &lt;span id="label_1"&gt;&lt;/span&gt;&lt;/div&gt; 
          &lt;input type="hidden" name="overall_review" id="slider_1" /&gt; 
          &lt;div class="slider_control" rel="1"&gt;&lt;/div&gt; 
      &lt;/li&gt; 
      &lt;li class="ui_slider"&gt; 
          &lt;div class="title"&gt;Cleanliness: &lt;span id="label_2"&gt;&lt;/span&gt;&lt;/div&gt; 
          &lt;input type="hidden" name="overall_review" id="slider_2" /&gt; 
          &lt;div class="slider_control" rel="2"&gt;&lt;/div&gt; 
      &lt;/li&gt; 
      &lt;li class="ui_slider"&gt; 
          &lt;div class="title"&gt;Facilities: &lt;span id="label_3"&gt;&lt;/span&gt;&lt;/div&gt; 
          &lt;input type="hidden" name="overall_review" id="slider_3" /&gt; 
          &lt;div class="slider_control" rel="3"&gt;&lt;/div&gt; 
      &lt;/li&gt; 
      &lt;li class="ui_slider"&gt; 
          &lt;div class="title"&gt;Location: &lt;span id="label_4"&gt;&lt;/span&gt;&lt;/div&gt; 
          &lt;input type="hidden" name="overall_review" id="slider_4" /&gt; 
          &lt;div class="slider_control" rel="4"&gt;&lt;/div&gt; 
      &lt;/li&gt; 
      &lt;li class="ui_slider"&gt; 
          &lt;div class="title"&gt;Quality of Service: &lt;span id="label_5"&gt;&lt;/span&gt;&lt;/div&gt; 
          &lt;input type="hidden" name="overall_review" id="slider_5" /&gt; 
          &lt;div class="slider_control" rel="5"&gt;&lt;/div&gt; 
      &lt;/li&gt; 
      &lt;li class="ui_slider"&gt; 
          &lt;div class="title"&gt;Room: &lt;span id="label_6"&gt;&lt;/span&gt;&lt;/div&gt; 
          &lt;input type="hidden" name="overall_review" id="slider_6" /&gt; 
          &lt;div class="slider_control" rel="6"&gt;&lt;/div&gt; 
      &lt;/li&gt; 
      &lt;li class="ui_slider"&gt; 
          &lt;div class="title"&gt;Value of Money: &lt;span id="label_7"&gt;&lt;/span&gt;&lt;/div&gt; 
          &lt;input type="hidden" name="overall_review" id="slider_7" /&gt; 
          &lt;div class="slider_control" rel="7"&gt;&lt;/div&gt; 
      &lt;/li&gt; 
  &lt;/ul&gt; 
  </code></pre>