带有文本框输入的 ui 滑块 [英] ui slider with text box input

问题描述

我们使用了一个 ui 滑块，它可以完美运行.

We have a ui slider we utilise, and it works flawlessly.

代码:

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 之间的任何值.

As you can see we allow user to pick anything between 0 and 5,000,000.

HTML 是:

<div id="slider-range-min" style="width: 460px; float:left;margin:10px;"></div>

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

What I want to do is add a text input element which works in harmony with the slider, so as user slides the texy box increases, decreases whatever..

或者如果用户在输入元素中输入数字，滑块会相应地移动.

Or if the user types numbers into the input element the slider moves appropriately.

有什么帮助吗?

预览是:

推荐答案

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

You need to update the input element (like you're doing now for the #amount element) on slide:

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

另外，你需要绑定input元素的change事件并调用slider的value方法:

Additionally, you need to bind to the change event for the input element and call the slider's value method:

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

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

此处不进行验证(您必须包含$"符号才能使其工作).您可以添加一些更强大的输入卫生来增强它.

There's no validation going on here (you must include the "$" sign for it to work). You could add some more robust input sanitation to enhance it.

这篇关于带有文本框输入的 ui 滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！