CODEWITHSUNDEEP
javascriptjqueryjquery-uisliderjquery-ui-slider
user1725518
user1725518

Reputation: 43

Jquery - Add Variable text to Slider

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

This is what I have right now, it's a slider bar that displays the value. The HTML part is just as follows:

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

What I would like is to have a table below it with a block of text; except I'd like the text to change as the value is increased. Say, if it was >= 20 and < 40 it's say "Blah1" =>40 it'd would say "blah2"

But I'm having trouble adding another event to the slide function.

Thank you very much for your help, I'll be able to apply it to a lot of things. Normally it's just one function per script, I've never layered them like this.

Upvotes: 4

Views: 559

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

All you should have to do is add an extra piece of code to the existing function that evaluates the value of 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");
        }
    }
});

Example: http://jsfiddle.net/andrewwhitaker/WP29E/16/

Upvotes: 4

Related Questions