tyut05000 / jqueryslider Goto Github PK

I deploy the function:

$(document).ready( function(){

var unit = ['score_playerorder1', 'score_playerorder2', 'score_playerorder3'];

for (var i = 0; i < unit.length; i++) { 
 var field = unit[i];
 var tag = '#id'+ field;
 $.fn.jSlider({
  renderTo: tag,
  size: { barWidth: 120, sliderWidth: 7},
  barCssName: 'bluebar',
  initPosition: 'max',
  onChanged: function(percentage, e) {
  callme(tag, field, percentage);}
 });
}
});

function me(field, unit, percentage){
 if(percentage <=0.15){
  $(field+' input[type=radio][name='+unit+']:eq(0)').attr({checked: true});
  return;
 }
 if(percentage <=0.64) {
  $(field+' input[type=radio][name='+unit+']:eq(1)').attr({checked: true});
  return;
 }
 if(percentage <=0.85) {
  $(field+' input[type=radio][name='+unit+']:eq(2)').attr({checked: true});
  return;
 }
 $(field+' input[type=radio][name='+unit+']:eq(3)').attr({checked: true});
}

The expected output is 3 sidebars each changing its unique grid of inputs
type radio. (total 4 radio in a grid, 3 grids)

Instead all sliders change the value of the last radio grid. i.e. last in
the array unit[], here named as score_playerorder3.

Please give me a hint how to produce a unique callback for different
sliders. How to decouple different sliders from the callback parameters
which have been seen last.


html fragment:
<div class="raiting"><div class="service_word">rate it:</div><div
class="hint">-</div><div id="idscore_playerorder1"><div
class="scorer_row"><input type="radio" name="score_playerorder1" value="1"
 /><input type="radio" name="score_playerorder1" value="2"  /><input
type="radio" name="score_playerorder1" value="3"  /><input type="radio"
name="score_playerorder1" value="4"  /></div></div><div class="hint">+</div>

<div class="raiting"><div class="service_word">rate it:</div><div
class="hint">-</div><div id="idscore_playerorder2"><div
class="scorer_row"><input type="radio" name="score_playerorder2" value="1"
 /><input type="radio" name="score_playerorder2" value="2"  /><input
type="radio" name="score_playerorder2" value="3"  /><input type="radio"
name="score_playerorder2" value="4"  /></div></div><div class="hint">+</div>

The setSliderValue method ignore the handle width, i try to fixed like below:  

line 129:
   $sliderProcess(s, s.data.completed, v * (s.data.bar.width() - s.width()));