Review on my multiple JQuery Slider on a page

Question

I have successfully placed multiple jquery ui slider on a page and its transalation text too. you can check it live on: http://outsourcingnepal.com/projects/jQuery%20slider/

I have my jquery code as :

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" ) ] );
 });
});

Now i would like to optimize it so that i can be independent of rel attribute.

MY HTML:

<ul class="slider-container"> 
 <li class="ui_slider"> 
 <div class="title">Overall: <span id="label_1"></span></div> 
 <input type="hidden" name="overall_review" id="slider_1" /> 
 <div class="slider_control" rel="1"></div> 
 </li> 
 <li class="ui_slider"> 
 <div class="title">Cleanliness: <span id="label_2"></span></div> 
 <input type="hidden" name="overall_review" id="slider_2" /> 
 <div class="slider_control" rel="2"></div> 
 </li> 
 <li class="ui_slider"> 
 <div class="title">Facilities: <span id="label_3"></span></div> 
 <input type="hidden" name="overall_review" id="slider_3" /> 
 <div class="slider_control" rel="3"></div> 
 </li> 
 <li class="ui_slider"> 
 <div class="title">Location: <span id="label_4"></span></div> 
 <input type="hidden" name="overall_review" id="slider_4" /> 
 <div class="slider_control" rel="4"></div> 
 </li> 
 <li class="ui_slider"> 
 <div class="title">Quality of Service: <span id="label_5"></span></div> 
 <input type="hidden" name="overall_review" id="slider_5" /> 
 <div class="slider_control" rel="5"></div> 
 </li> 
 <li class="ui_slider"> 
 <div class="title">Room: <span id="label_6"></span></div> 
 <input type="hidden" name="overall_review" id="slider_6" /> 
 <div class="slider_control" rel="6"></div> 
 </li> 
 <li class="ui_slider"> 
 <div class="title">Value of Money: <span id="label_7"></span></div> 
 <input type="hidden" name="overall_review" id="slider_7" /> 
 <div class="slider_control" rel="7"></div> 
 </li> 
</ul> 

Answer 1

In my option your code has two problems:

1. You unnecessarily fill your HTML with empty elements which you could just create in your script. Changing that would remove the necessity for the rel attribute.

2. more importantly (even if there are people that may disagree), you have unnecessarily made your form dependent on JavaScript. It would be much better to have select elements in your HTML, which you can replace with sliders. That way even users without JavaScript can use your form unrestricted.

I've written an example how I would do it:

$(".ui_slider select").each(function() {
 var select = $(this); // Cache a refernce to the current select
 var sliderDiv = $("<div></div>"); // create a div for the slider
 var displayLabel = $("<span></span>"); // create a span to display current selection
 if (select[0].selectedIndex < 0) // Make sure that an item is selected
 select[0].selectedIndex = 0;
 select
 .hide() // hide the select
 .before( // Insert display label before the select
 displayLabel
 .text(select.find("option:selected").text()) // and set it's default text
 )
 .after( 
 sliderDiv // Insert the silder div after the select
 .data("select", select) // store a reference to the select
 .data("label", displayLabel) // store a reference to the display label
 .slider({
 max: select.find("option").length - 1, // set to number of items in select
 slide: function(event, ui) {
 var select = $(this).data("select"); 
 select[0].selectedIndex = ui.value; // update the select
 $(this).data("label").text( // Update the display label
 select.find("option:selected").text()
 );
 }
 })
 );
});

HTML (repeat as needed):

<div class="ui_slider">
 <label for="overall">Overall: </label>
 <select name="overall" id="overall">
 <option value="0">Not Good</option>
 <option value="1">OK</option>
 <option value="2">Average</option>
 <option value="3">Above Average</option>
 <option value="4">Excellent</option>
 <option value="5">Outstanding</option>
 </select>
</div>

Working sample: http://jsfiddle.net/YfqCx/2/

• KoolKabin: your suggestions are really good ones...