Ползунок пользовательского интерфейса с вводом текстового поля

У нас есть ползунок пользовательского интерфейса, который мы используем, и он работает безупречно.

код:

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 увеличивается, уменьшается что угодно.

Или, если пользователь вводит числа в элемент ввода, ползунок перемещается соответствующим образом.

Любая помощь, пожалуйста?

Предварительный просмотр:

введите здесь описание изображения


jquery jquery-ui jquery-ui-slider
person 422    schedule 23.09.2011    source источник
comment
Я думаю, вы могли бы что-нибудь придумать, используя диапазон с фиксированным минимальным примером.   -  person Rusty Fausak    schedule 23.09.2011
comment
спасибо @rfausak проверю   -  person 422    schedule 23.09.2011
comment
К вашему сведению: также обнаружено, что группа филаментов добилась этого, но, похоже, они единственные. лаборатория/ хотел бы видеть других   -  person 422    schedule 23.09.2011

Ответы (1)


arrow_upward
27
arrow_downward

Вам нужно обновить элемент 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/

Здесь не происходит проверки (вы должны включить знак «$», чтобы он работал). Вы можете добавить более надежную очистку ввода, чтобы улучшить его.

person Andrew Whitaker    schedule 23.09.2011
comment
Это здорово, Эндрю, единственная проблема, которую я вижу, это то, что пользователь не может ввести элемент ввода, и ползунок перемещается в эту ценовую позицию, пока вы не нажмете на поле ввода. Я полагаю, можно было бы добавить onkeyup эй.. Но отличный код, проголосовал за - person 422; 23.09.2011
comment
@422: Это должно работать, возможно, вам придется ввести большое значение, чтобы увидеть его (например, $3000000) - person Andrew Whitaker; 23.09.2011
comment
изменил div на ‹div id=slider style=width: 460px; float:left;margin:40px 10px;›‹/div› и по-прежнему не обновляется автоматически по мере ввода, даже с большими числами. Если это не проблема jsfiddle, будет перенесено на html и протестировано - person 422; 23.09.2011
comment
нужна помощь с этим stackoverflow.com/questions/9480039/ - person bala3569; 28.02.2012
comment
Вы имеете в виду надежный, как регулярное выражение? ;-) /\d+/.exec(this.value) - person Nick Bolton; 02.08.2012
comment
@AndrewWhitaker, как убрать знак доллара из ввода? - person Istiaque Ahmed; 17.09.2012
comment
@IstiaqueAhmed: удалите знак доллара ($) из кода, а также код подстроки jsfiddle.net/VfSda - person Andrew Whitaker; 17.09.2012