jQuery UI слайдер: несколько слайдеров со значениями по умолчанию

Question

У меня есть страница с несколькими слайдерами jQuery UI на ней. Ползунки должны иметь значение по умолчанию. Например, когда кто-то приходит к моей форме, устанавливает слайдер, отправляет форму, но получает ошибку, ползунки не должны возвращаться обратно к 0. Все предыдущие элементы моей формы, которые они заполняли, должны оставаться на месте. Я знаю, что вы можете установить значение по умолчанию для слайдера, но у меня возникли проблемы с его работой с несколькими ползунками.

Что я хочу сделать, это взять значение из поля ввода и использовать его как значение по умолчанию для ползунка диапазона. Вы можете видеть на jsfiddle ниже. У меня установлено значение ввода 2 и 4. Когда вы загружаете страницу, ползунки переходят в ту же позицию в 2.

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

Любые идеи о том, как это сделать?

http://jsfiddle.net/dmcgrew/EquTn/3/

HTML:

<div class="kpa_rate kpa_rate1"> 
    <label for="kpa1_rating_value">Rating 1:</label> 

    <div id="1" class="slider"></div> 
    <input type="text" class="kpa1_rating_value" name="kpa1_rating" value="2" />  
</div> 


<div class="kpa_rate kpa_rate2"> 
    <label for="kpa2_rating_value">Rating 2:</label> 

    <div id="2" class="slider"></div> 
    <input type="text" class="kpa2_rating_value" name="kpa2_rating" value="4" /> 
</div> 

JS:

$(function() { 
    $(".slider").slider({ 
range: "max", 
min: 0, 
max: 5, 
value: $("input", this).val(), 
slide: function(event, ui) {     
    //get the id of this slider 
    var id = $(this).attr("id"); 
    //select the input box that has the same id as the slider within it and set it's value to the current slider value. 
     $("span[class*=" + id + "]").text(ui.value); 
    $("input[class*=" + id + "]").val(ui.value); 
} 
}); 
}); 

Answer 1

Замените свой вариант значения с создания события:

create: function() { 
    $(this).slider("option", "value", $(this).next().val()); 
}, 

jsFiddle example

Answer 2

Лучший ответ от самого jQueryUI multiple sliders

<div id="eq"> 
    <span>88</span> 
    <span>77</span> 
    <span>55</span> 
</div> 

// Script 
$("#eq > span").each(function() { 

    // read initial values from markup and remove that 
    var value = parseInt($(this).text(), 10); 

    $(this).empty().slider({ 
    value: value, 
    range: "min", 
    animate: true, 
    orientation: "vertical" 
    }); 
});