0

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!

3 Answers 3

1

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");
Sign up to request clarification or add additional context in comments.

2 Comments

I suspect the code they have is copy-pasted, and they don't fully understand how to modify it. Not that there is anything wrong with that, we all start out with jQuery like that, but it might explain why the OP needed to ask the question.
You are almost right, I'am almost a newbie with jQuery and I didn't completely understand how that function works :-P
1

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/

Comments

0

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/

3 Comments

As a general rule, try not to just post a link to a JsFiddle - you should also include the core part of your answer here on StackOverflow as well. But your code does appear to work.
One more question, if I add an image instead of text to: if ((ui.value <= 80) && (ui.value > 60)) text = "<ul><li style='float:left'><img src='http://www.beliceweb.it/alveare/img_art/intelligenza_test.jpg' height='50%' width='50%'/></li><li style='float:left'><img src='http://www.beliceweb.it/alveare/img_art/intelligenza_test.jpg' height='50%' width='50%'/></li></ul>"; it is shown even if I move from 60 to 70 and more
yes, is correct. It is shown in the interval (60,80], as you wrote. If you want only at 60 you can change the if statment to ui.value == 60

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.