CODEWITHSUNDEEP
jqueryjquery-uicss
maisdesign
maisdesign

Reputation: 51

How to add values with jQuery UI Slider?

This is what I've got actually: http://jsfiddle.net/downloadtaky/P7jYU/ What I would like to achieve is that each time the user moves the slider he doesn't see only price changing but also description changing.

Like:

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!

Is there anyone who can help me understand how to do this? Something like: https://interserver.net/vps/

Thank yoU!

Upvotes: 0

Views: 1050

Answers (3)

zambotn
zambotn

Reputation: 785

You can change the slide function to:

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>" );

            },

as you can find here http://jsfiddle.net/V7LLy/

Upvotes: 0

jhsowter
jhsowter

Reputation: 619

Use the callback function on the slider's change event to update the div of interest, like so: 

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

doco is here http://jqueryui.com/demos/slider/

Upvotes: 1

SynXsiS
SynXsiS

Reputation: 1898

I'm not sure where you are stuck with this. You've already got a handler for the slide event, all you need to do is add some code which writes or modifies the description text.

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

Upvotes: 1

Related Questions