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

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