我需要一个带有两个手柄的jquery滑块,输入来自两个文本框,如
http://www.israel-diamonds.com/search/diamonds/default.aspx.目前我有一个单一的手柄滑块,来自单个文本框的输入
$("#slider").slider({
value: 1,step: 1000,min: 0,max: 5000000,slide: function(event,ui) {
$("input").val("$" + ui.value);
}
});
$("input").change(function () {
var value = this.value.substring(1);
console.log(value);
$("#slider").slider("value",parseInt(value));
});
有什么建议吗？
编辑：
<div class="demo">
<input type="text" class="sliderValue" />
<p>
</p>
<div id="slider"></div>
</div>
和
$("#slider").slider({
range: "min",value: 1,step: 10,max: 1000,slide: function (event,ui) {
$("input").val(ui.value);
}
});
$("input").change(function (event) {
var value1 = parseFloat($("input").val());
var highVal = value1 * 2;
$("#slider").slider("option",{ "max": highVal,"value": value1 });
});
解决方法
假设你有两个< input>内容：
<input type="text" class="sliderValue" data-index="0" value="10" /> <input type="text" class="sliderValue" data-index="1" value="90" />
还有一个滑块占位符元素：
<div id="slider"></div>
您可以使用values选项将滑块窗口小部件置于多个句柄模式,并同步< input>的值.元素：
$("#slider").slider({
min: 0,max: 100,step: 1,values: [10,90],ui) {
for (var i = 0; i < ui.values.length; ++i) {
$("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
}
}
});
$("input.sliderValue").change(function() {
var $this = $(this);
$("#slider").slider("values",$this.data("index"),$this.val());
});
您可以在this fiddle中看到结果.
