Как добавить значения с помощью jQuery UI Slider?

Question

Вот что у меня есть на самом деле: http://jsfiddle.net/downloadtaky/P7jYU/ Чего я хотел бы добиться, так это того, что каждый раз, когда пользователь перемещает ползунок, он видит не только изменение цены, но и описание.

Как:

if 20 == basic service (lorem ipsum.....)

if 40 == medium service (lorem ipsum.....)

if 60 == top service (lorem ipsum.....)

If 80 == I can give you also my mum!

Есть ли кто-нибудь, кто может помочь мне понять, как это сделать?Что-то вроде: https://interserver.net/vps/

Спасибо!

Answer 1

Используйте функцию обратного вызова в событии изменения ползунка, чтобы обновить интересующий вас div, например:

$( "#slider" ).slider({
    change: function(event, ui) { 
        if($("#slider").slider("value") === "20"){
            $("#description").html("Basic Service")
        }
        ...
    }
});

Документ здесь http://jqueryui.com/demos/slider/

Answer 2

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

$( "#slider-result" ).html( ui.value ).append(ui.value < 50? "- Bad":"- Good");

Answer 3

Вы можете изменить функцию slide на:

slide: function( event, ui ) {
                var text = ""
                if ((ui.value <= 80) && (ui.value > 60))
                    text = "text1";
                else if ((ui.value <= 60) && (ui.value > 40))
                    text = "text2";
                //GO ON this way
                $( "#slider-result" ).html( ui.value + "<div>"+text+"<div>" );

            },

, как вы можете найти здесь http://jsfiddle.net/V7LLy/