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

您需要更新slide 上的input 元素（就像您现在对#amount 元素所做的那样）：

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

另外，您需要为input元素绑定change事件并调用滑块的value方法：

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

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

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