jQuery 带有文本框输入的 ui 滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7523864/
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
ui slider with text box input
提问by 422
We have a ui slider we utilise, and it works flawlessly.
我们使用了一个 ui 滑块，它可以完美运行。
code:
代码：
jQuery(function() {
jQuery( "#slider-range-min" ).slider({
range: "min",
value: 1,
step: 1000,
min: 0,
max: 5000000,
slide: function( event, ui ) {
jQuery( "#amount" ).val( "$" + ui.value );
}
});
jQuery( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
});
As you can see we allow user to pick anything between 0 and 5,000,000.
如您所见，我们允许用户选择 0 到 5,000,000 之间的任何值。
Html is:
html是：
<div id="slider-range-min" style="width: 460px; float:left;margin:10px;"></div>
What I want to do is add a text input element which works in harmony with the slider, so as user slides the texy box increases, decreases whatever..
我想要做的是添加一个与滑块协调工作的文本输入元素，因此当用户滑动时，texy 框增加，减少任何..
Or if the user types numbers into the input element the slider moves appropriately.
或者，如果用户在输入元素中键入数字，则滑块会适当移动。
Any help please ?
请问有什么帮助吗？
Preview is:
预览是：
回答by Andrew Whitaker
You need to update the inputelement (like you're doing now for the #amountelement) on slide:
您需要更新input元素（就像您现在为#amount元素所做的那样）slide：
$("#slider").slider({
range: "min",
value: 1,
step: 1000,
min: 0,
max: 5000000,
slide: function(event, ui) {
$("input").val("$" + ui.value);
}
});
Additionally, you need to bind to the changeevent for the inputelement and call the slider's valuemethod:
此外，您需要绑定到元素的change事件input并调用滑块的value方法：
$("input").change(function () {
var value = this.value.substring(1);
console.log(value);
$("#slider").slider("value", parseInt(value));
});
Example:http://jsfiddle.net/andrewwhitaker/MD3mX/
示例：http : //jsfiddle.net/andrewwhitaker/MD3mX/
There's no validation going on here (you must include the "$" sign for it to work). You could add some more robust input sanitation to enhance it.
这里没有进行验证（您必须包含“$”符号才能使其工作）。您可以添加一些更强大的输入卫生来增强它。
