How to add values with jQuery UI Slider?

Question

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!

SynXsiS · Accepted Answer · 2012-02-06 00:29:22Z

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

answered Feb 6, 2012 at 0:29

SynXsiS

1,90810 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GregL Over a year ago

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.

maisdesign Over a year ago

You are almost right, I'am almost a newbie with jQuery and I didn't completely understand how that function works :-P

jhsowter · Accepted Answer · 2012-02-06 00:30:53Z

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/

answered Feb 6, 2012 at 0:30

jhsowter

6193 silver badges8 bronze badges

Comments

zambotn · Accepted Answer · 2012-02-06 10:44:51Z

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/

edited Feb 6, 2012 at 10:44

answered Feb 6, 2012 at 0:37

zambotn

7851 gold badge7 silver badges20 bronze badges

3 Comments

GregL Over a year ago

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.

maisdesign Over a year ago

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

zambotn Over a year ago

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

Collectives™ on Stack Overflow

How to add values with jQuery UI Slider?

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related