Jquery — добавить переменный текст в слайдер

$('#slider').slider({
    range: "min",
    value: 20,
    step: 5,
    min: 20,
    slide: function( event, ui ) {
        $( "#amount1" ).val( "$" + ui.value );
    }
});

Это то, что у меня есть прямо сейчас, это ползунок, который отображает значение. Часть HTML выглядит следующим образом:

<label for="amount">Offer:</label>
<input type="text" id="amount1" />
<div id="slider"></div>

Я бы хотел, чтобы под ней была таблица с текстовым блоком; за исключением того, что я хотел бы, чтобы текст менялся по мере увеличения значения. Скажем, если бы это было >= 20 и < 40, то, скажем, "Blah1" =>40, было бы сказано "blah2"

Но у меня возникли проблемы с добавлением другого события в функцию слайда.

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


javascript slider jquery jquery-ui jquery-ui-slider
person user1725518    schedule 06.10.2012    source источник
comment
Можете ли вы опубликовать код, который вы использовали для таблицы? Возможно, скрипку?   -  person Harsha Venkatram    schedule 06.10.2012

Ответы (1)


arrow_upward
4
arrow_downward

Все, что вам нужно сделать, это добавить дополнительный фрагмент кода к существующей функции, которая оценивает значение ui.value:

$('#slider').slider({
    range: "min",
    value: 20,
    step: 5,
    min: 20,
    slide: function(event, ui) {
        $("#amount1").val("$" + ui.value);

        if (ui.value >= 20 && ui.value < 40) {
            $("#message").text("greater than or equal to 20 and less than 40");
        } else if (ui.value >= 40) {
            $("#message").text("greater than or equal to 40");
        }
    }
});

Пример: http://jsfiddle.net/andrewwhitaker/WP29E/16/< /а>

person Andrew Whitaker    schedule 06.10.2012