带有两个句柄的 Jquery UI 滑块和来自两个文本框的输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9480039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery UI slider with two handles with input from two text box?
提问by bala3569
I need a jquery slider with two handles with inputs from two textbox like this http://www.israel-diamonds.com/search/diamonds/default.aspx.Currently i have a single handle slider with input from a single textbox
我需要一个带有两个句柄的 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));
});
Any suggestion?
有什么建议吗？
EDIT:
编辑：
<div class="demo">
<input type="text" class="sliderValue" />
<p>
</p>
<div id="slider"></div>
</div>
and
和
$("#slider").slider({
range: "min",
value: 1,
step: 10,
min: 0,
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 });
});
回答by Frédéric Hamidi
Assuming you have two <input>elements:
假设你有两个<input>元素：
<input type="text" class="sliderValue" data-index="0" value="10" />
<input type="text" class="sliderValue" data-index="1" value="90" />
And a slider placeholder element:
还有一个滑块占位符元素：
<div id="slider"></div>
You can use the valuesoption to put the slider widget in multiple handle mode, and synchronize the values of the <input>elements with:
您可以使用该values选项将滑块小部件置于多手柄模式，并将<input>元素的值与：
$("#slider").slider({
min: 0,
max: 100,
step: 1,
values: [10, 90],
slide: function(event, 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());
});
You can see the results in this fiddle.
你可以在这个 fiddle 中看到结果。
回答by drjorgepolanco
From the official jQuery UI Documentation: https://jqueryui.com/slider/#range
来自官方 jQuery UI 文档：https: //jqueryui.com/slider/#range
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
</head>
<body>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
} );
</script>
</body>
</html>
