带文本框输入的ui滑块

Question

我们使用了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>

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

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

有什么帮助吗？

预览是:

Answer 1

你需要更新input元素(就像你现在为#amount元素做的那样)slide:

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

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

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

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

这里没有验证(你必须包含"$"符号才能工作).您可以添加一些更强大的输入卫生来增强它.