带文本框输入的ui滑块

我们有一个ui滑块我们使用，它完美无缺。

码：

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

如您所见，我们允许用户选择介于0到5,000,000之间的任何内容。

Html是：

我想要做的是添加一个与滑块协调工作的文本输入元素，以便用户滑动texy框增加，减少任何…

或者，如果用户在输入元素中键入数字，则滑块适当地移动。

有什么帮助吗？

预览是：

Answer 1

您需要在slide上更新input元素（就像您现在为#amount元素所做的#amount ）：

 $("#slider").slider({ range: "min", value: 1, step: 1000, min: 0, max: 5000000, slide: function(event, ui) { $("input").val("$" + ui.value); } }); 

此外，您需要绑定到input元素的change事件并调用滑块的value方法：

 $("input").change(function () { var value = this.value.substring(1); console.log(value); $("#slider").slider("value", parseInt(value)); }); 

示例： http ： //jsfiddle.net/andrewwhitaker/MD3mX/

这里没有validation（你必须包含“$”符号才能工作）。 您可以添加一些更强大的输入卫生来增强它。