我们有一个我们使用的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是：
<div id="slider-range-min" style="width: 460px; float:left;margin:10px;"></div>
我想要做的是添加一个与滑块协调工作的文本输入元素,以便用户幻灯片的文本框增加,减少任何..
或者如果用户将数字输入到输入元素中,则滑块适当地移动.
请帮忙吗
预览是：
解决方法
您需要在幻灯片上更新输入元素(就像您现在在#amount元素中)：
$("#slider").slider({
range: "min",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));
});
示例：http://jsfiddle.net/andrewwhitaker/MD3mX/
这里没有验证(您必须包含“$”号才能正常工作).您可以添加更强大的输入卫生来增强它.
