CODEWITHSUNDEEP
javascriptphpjqueryhtml
user2554201
user2554201

Reputation: 33

bind jquery slider to change contents of a div?

I would like to change the content of a Message div (or switch out divs) when the slider moves up and down. My slider only has 5 positions so I need 5 different messages to show when each is selected. Anyone know how to do this?

This is the slider code:

$(function () {
    var donation = ['Bronze', 'Silver', 'Gold', 'Platinum', 'Diamond'];
    jQuery('#slider').slider({
        min: 0,
        max: 4,
        orientation: 'horizontal',
        step: 1,
        create: function (event, ui) {
            jQuery('#amount').text(donation[0]);
        },
      slide: function( event, ui ) {
        jQuery('#amount').text(donation[ui.value]);
      }
    });
});

Upvotes: 0

Views: 656

Answers (1)

Jonathan Michalik
Jonathan Michalik

Reputation: 1532

You're actually pretty close to doing this already. If there's a message you'd like to display that always coincides with a donation level, you can expand the string array into an array of JSON objects:

var donation = [
    {'level':'Bronze', 'message':'Woo Bronze tier!'},
    {'level':'Silver', 'message':'Woo Silver tier!'},
    {'level':'Gold', 'message':'Woo Gold tier!'},
    {'level':'Platinum', 'message':'Woo Platinum tier!'},
    {'level':'Diamond', 'message':'Woo Diamond tier!'}];

Then you can call into both the level and message parts of the object in your code:

$(function () { 
    $('#slider').slider({
        value:100,
        min: 0,
        max: 4,
        step: 1,
        create: function (event, ui) {
            $('#amount').text(donation[0].level);
            $('#message').text(donation[0].message);
        },
      slide: function ( event, ui ) {
        $('#amount').text(donation[ui.value].level);
        $('#message').text(donation[ui.value].message);
      }
    });
});

You can check out a working demo here.

Upvotes: 2

Related Questions