Running multiple values from JQuery Slider

[mmcdonald]

Hello DaniWebers!

I'm absolutely shocking when it comes to JavaScript/JQuery and have run into an occurance when I would like to use it. Now before you slap me on the wrist I DO intend to learn JS in 2014 (Scouts honour!).

I am using this slider: JQuery - Snap To Increments

HTML

<div id="slider-snap-inc" class="slider bg-green"></div>
<div class="slider-value">
    Days: <span id="slider-snap-inc-days"></span> | 
    Cost: <span id="slider-snap-inc-amount"></span> |
    Savings: <span id="slider-snap-inc-savings"></span>
</div>

JS:

// snap inc
$("#slider-snap-inc").slider({
    value: 50,
    min: 50,
    max: 1300,
    step: 50,
    slide: function (event, ui) {
        $("#slider-snap-inc-amount").text("$" + ui.value);
    }
});

The above works great and the value shows in increments just as it should.. but what I would like to do is add another two calculations:

1. Days
The number days selected for premium account upgrade.

2. Savings
The money saved by purchasing more days in one transaction.

A table with the data I need to present, just so you understand a little bit easier: Data I'm Using

How does one go about adding more calculations and outputs to the same slider? I've played around but can only make one of the three work at any one time. Thanks for any assistance.

[pritaeas]

How does one go about adding more calculations and outputs to the same slider

Just add more code to the slide event. If you have three, make sure they have unique id's.

[mmcdonald]

Yeah I think I've decided to hire a dev for this little snippet :3 but thanks