jQuery UI滑塊：使用默認值的多個滑塊

我有一個包含多個jQuery UI滑塊的頁面。滑塊需要有一個默認值。例如，當有人來到我的表單中時，設置滑塊，提交表單，但他們得到一個錯誤，滑塊不應該重置爲0.我填寫的表單中的所有以前的元素都應保留在原位。我知道你可以設置滑塊的默認值，但我很難讓它與多個滑塊一起使用。jQuery UI滑塊：使用默認值的多個滑塊

我正在做的是從輸入字段中取值並將其用作範圍滑塊的默認值。你可以看到在下面的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); 
} 
}); 
});

來源

2013-06-24 Dustin

與創建事件替換你的價值選擇：

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

jsFiddle example

來源

2013-06-24 14:32:21 j08691

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

來源

2016-04-04 20:12:04

jQuery UI滑塊：使用默認值的多個滑塊

回答

相關問題