jQuery UI滑块:具有默认值的多个滑块
提问于 2013-06-24 06:25:23
我有一个包含多个jQuery UI滑块的页面。滑块需要有一个默认值。例如，当有人来到我的表单时，设置滑块，提交表单，但是他们得到了一个错误--滑块不应该重置为0。我以前填写的表格中的所有元素都应该保持原样。我知道您可以为滑块设置一个默认值，但是我很难让它与多个滑块一起工作。
我想要做的是从输入字段中获取值，并将其用作范围滑块的默认值。您可以看到，在下面的“小提琴”中，我将输入的值设置为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);
}
});
});
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-06-24 06:32:21
将您的value选项替换为create事件：
create: function () {
$(this).slider( "option", "value", $(this).next().val() );
},Stack Overflow用户
发布于 2016-04-04 12:12:04
最好的答案来自jQueryUI本身，多滑块
<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"
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17277888
复制相关文章
点击加载更多
腾讯云开发者
