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

请帮忙吗?

预览为:

推荐答案

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

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事件并调用滑块的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屋！