带文本框输入的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/

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