How to control 2 amounts with one Jquery UI slider

Question

How can I control 2 amounts with 1 slider ,

Below is the code I have for one slider controlling one amount.

$(function() {
 $("#slider").slider({
  value:38.11,
  min: 38.11,
  max: 100,
  step: 1,
  slide: function(event, ui) {
   $("#amount").val('$' + ui.value);
  }
 });
 $("#amount").val('$' + $("#slider").slider("value"));
});

Can any one help ?

Answer 1

$(function() {
        $("#slider").slider({
                value:38.11,
                min: 38.11,
                max: 100,
                step: 1,
                slide: function(event, ui) {
                        $("#amount").val('$' + ui.value);
                        $("#otherAmount").val('$' + ui.value);
                }
        });
        $("#amount").val('$' + $("#slider").slider("value"));
        $("#otherAmount").val('$' + $("#slider").slider("value"));
});

Answer 2

I think instead of value you use values and give multiple values, so:

values: [1,5,9]

this should help explain http://docs.jquery.com/UI/Slider#option-values

Answer 3

Edit If you want to handle 2 values with the same slider, adding and subtracting so their total is always the same the solution is pretty easy. In the slide function you would do something like this:

$(function() {
    $("#slider").slider({
            value:38.11,
            min: 38.11,
            max: 100,
            step: 1,
            slide: function (event, ui) {
                $("#amount").val('$' + ui.value);
                $("#otheramount").val('$' + (100 - ui.value));
}
    });
    $("#amount").val('$' + $("#slider").slider("value"));
});

This is how the complete function would look like.