Динамическое использование jQuery UI Slider?

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

$("#slider-range-min").slider({
            range: "min",
            value: 1,
            step: 1000,
            min: 0,
            max: 5000000,
            slide: function (event, ui) {
                $("input").val(ui.value);
            }
        });
        $("input").change(function (event) {
            var value1 = $("input").val();
            $("#slider-range-min").slider("option", "value", value1);
        });

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

Любое предложение?

РЕДАКТИРОВАТЬ: мне нужно, когда я ввожу 500 в текстовое поле, мой ползунок должен автоматически перемещаться в центр. в центральное положение автоматически, и правый конец должен быть 800, а левый 0


jquery jquery-ui jquery-ui-slider
person bala3569    schedule 27.02.2012    source источник
comment
Можете ли вы показать пример того, что вы имеете в виду? может какой html? чтобы я мог видеть, как это выглядит?   -  person Nicholas    schedule 27.02.2012
comment
jsfiddle.net/andrewwhitaker/MD3mX   -  person bala3569    schedule 27.02.2012
comment
@Antimated: что мне нужно, так это то, что когда я ввожу 500 в текстовое поле, мой ползунок должен перемещаться в центр ... если я перемещаю ползунок вправо, конец должен быть 1000, а слева он должен быть 0   -  person bala3569    schedule 27.02.2012
comment
а для 400 правый конец должен быть 800, а левый 0   -  person bala3569    schedule 27.02.2012
comment
@Antimated: понял мою точку зрения?   -  person bala3569    schedule 27.02.2012
comment
да, я понял :) Я кое-что тестировал, но потом увидел, что кто-то опубликовал решение :). извините, я не смог вам помочь :/   -  person Nicholas    schedule 27.02.2012

Ответы (2)


arrow_upward
2
arrow_downward

Итак, что вам нужно, так это изменить диапазон ползунка от 0 до двойного значения, введенного в текстовое поле? Я думаю, вы можете использовать метод «опция» на ползунке, например:

 $("input").change(function (event) {
     var value1 = parseFloat($("input").val());
     var highVal = value1 * 2;
     $("#slider-range-min").slider("option", {"max": highVal, "value": value1});
 });

Изменить: вот скрипка - http://jsfiddle.net/cXYC4/

person Alex    schedule 27.02.2012

arrow_upward
0
arrow_downward

Я не уверен, но это может сработать: http://flowplayer.org/tools/rangeinput/

person Nicholas    schedule 27.02.2012