jQuery UI Sliders - Adding values together from different sliders into one value

Question

This seems like it would be a simple question but I keep running into a wall here.

All I am trying to do is add two values together into one value from two different sliders using jQuery UI. Here is my current code:

They aren't very clear in the documentation if this can be done or not. I have tried their methods and still can't get it to do what I want it to.

What am I doing wrong?

<script>
$(function() {      

 $("#slider1").slider({
min: 0,
max: 100,
slide: function(event, ui) {
    $('#slider1').slider("option", "value", ui.value);
    var amountOne = $('#amount').val(ui.value);
  }
     });

 $("#slider2").slider({
min: 0,
max: 100,
slide: function(event, ui) {
    $('#slider2').slider("option", "value", ui.value);
    var amountTwo = $('#amount2').val(ui.value);

 }
  });


    });


</script>

Here is my HTML

 <div id="slider1" style="width:100px"></div>
 <div id="slider2" style="width:100px"></div>

 <input id="amount" />
 <input id="amount2" />
 <input id="amount3" />

I just want amount and amount2 to be added together to make amount3. Seems like it would be easy, but it's been giving me problems.

Answer 1

You can get the slider values with below code and use them as required.

var amountOne = $('#slider1').slider("option", "value");
var amountTwo = $('#slider1').slider("option", "value");

Answer 2

Check out http://jsfiddle.net/ZM59a/2/ - that ought to do it. I just created an update function which is called whenever either of the sliders are moved. Hope it helps.

(PS It was a real pain that applying jQuery UI doesn't automatically include the CSS... I had to check the source at http://jqueryui.com/themeroller/ and add the link from there. Got there in the end though :))