我们有一个我们使用的ui滑块,它的工作原理完美.
@H_502_2@码：
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" ) );
});
@H_502_2@如您所见,我们允许用户选择0到5,000,000之间的任何东西.
@H_502_2@Html是：
<div id="slider-range-min" style="width: 460px; float:left;margin:10px;"></div>@H_502_2@我想要做的是添加一个与滑块协调工作的文本输入元素,以便用户幻灯片的文本框增加,减少任何.. @H_502_2@或者如果用户将数字输入到输入元素中,则滑块适当地移动. @H_502_2@请帮忙吗 @H_502_2@预览是：
解决方法
您需要在幻灯片上更新输入元素(就像您现在在#amount元素中)：
$("#slider").slider({
range: "min",slide: function(event,ui) {
$("input").val("$" + ui.value);
}
});
@H_502_2@此外,您需要绑定到输入元素的更改事件并调用滑块的值方法：
$("input").change(function () {
var value = this.value.substring(1);
console.log(value);
$("#slider").slider("value",parseInt(value));
});
@H_502_2@示例：http://jsfiddle.net/andrewwhitaker/MD3mX/
@H_502_2@这里没有验证(您必须包含“$”号才能正常工作).您可以添加更强大的输入卫生来增强它.
