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事件替换value选项:

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

jsFiddle例子