Все мои (jQuery UI) одиночные слайдеры получают одинаковое значение

Question

Я хочу, чтобы каждый слайдер той же страницы имел свою собственную ценность, когда я скользил по каждому из них.

Когда я сдвигаю один из них, «ползунок» каждого слайдера работает так же, как и условный фоновый цвет, но значение одинаково для всех слайдеров.

Вот мой JS код:

$(document).ready(function() { 
    $('.slider').slider({ 
    value: 5, 
    min: 1, 
    max: 10, 
    step: 1, 
    slide: function(event, ui) { 
     $(".ui-slider-handle").text(ui.value); 
     switch(ui.value){ 
     case 1: { $(this).css('background', 'darkred'); break;} 
     case 2: { $(this).css('background', 'red'); break;} 
     case 3: { $(this).css('background', 'orange'); break;} 
     case 4: { $(this).css('background', 'gold'); break;} 
     case 5: { $(this).css('background', 'yellow'); break;} 
     case 6: { $(this).css('background', '#AAFF00'); break;} 
     case 7: { $(this).css('background', 'lime'); break;} 
     case 8: { $(this).css('background', 'cyan'); break;} 
     case 9: { $(this).css('background', '#00AAFF'); break;} 
     case 10: { $(this).css('background', 'blue'); break;} 
     } 
    } 
    }); 
    $(".ui-slider-handle").val($('.slider').slider("value")); 
}); 

А вот код в JSfiddle: http://jsfiddle.net/Arkl1te/Wrq3H/

Есть ли способ исправить это? Я ценю вашу помощь!

Answer 1

Это не то, что они имеют такое же значение, проблема заключается в том, что вы обновляете и обрабатывает каждый раз, когда слайд происходит. Возможные исправления: http://jsfiddle.net/Wrq3H/3/

//change text for current's slider handle only 
     $(this).children(".ui-slider-handle").text(ui.value); 

Answer 2

Вам необходимо создать отдельный параметр значения для каждого ползунка. Они ссылаются на одну и ту же переменную, и поэтому шаг применяется к обоим, исходя из последнего значения. Попробуйте что-то вроде:

valueone = 5, 
valuetwo = 5, 
/* ... other content ... */ 

$(".ui-slider-handle").val($('#slider-1').slider("valueone")); 
$(".ui-slider-handle").val($('#slider-2').slider("valuetwo")); 

Answer 3

В функции для слайда необходимо изменить селектор из всех элементов с ".ui-slider-handle" для детей в элементе, который вызывает событие слайда:

$(this).children(".ui-slider-handle").text(ui.value); 

Это исправить позволит вам использовать многие ползунки без изменения функции для слайда Пример http://jsfiddle.net/cVUp3/1/