Слайдер ui с текстовым полем ввода

У нас есть слайдер 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>

Что я хочу сделать, это добавить элемент ввода текста, который работает в согласии с ползунком, так как пользователь скользит по текси-боксу, уменьшает все.

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

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

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

enter image description here

ОТВЕТЫ

Ответ 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/

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