Question

I’m trying to create two sliders, each with their own values and make jQuery add those two to each other in an input field.

I’m a total newbie when it comes to jQuery and I have only managed to come this far by following the code on http://jqueryui.com/demos/slider/

$(function() {
    $( "#slider1" ).slider({
        value: 500,
        min: 500,
        max: 4000,
        step: 500,
        slide: function( event, ui ) {
            $( "#amount1" ).val( ui.value + " kr." );
        }
    });
    $( "#slider2" ).slider({
        value: 2700,
        min: 2700,
        max: 27000,
        step: 2700,
        slide: function( event, ui ) {
            $( "#amount2" ).val( ui.value + " kr." );
        }
    });
    $( '#amount' ).val(( '#amount1' ) + ( '#amount2' ));
});

HTML:

    <label for="amount1">Hours (500 kr. increments):</label>
    <input type="text" id="amount1" style="border:0; color:#f6931f; font-weight:bold;" />

<div id="slider1"></div>

    <label for="amount2">Camera (500 kr. increments):</label>
    <input type="text" id="amount2" style="border:0; color:#f6931f; font-weight:bold;" />

<div id="slider2"></div>

    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />

I want the amount from slider1 and slider2 shown in the input field “amount”.

Answer 1

Add updateTotal function and call it in slide event handler of your sliders:

$("#slider1").slider({
    value: 500,
    min: 500,
    max: 4000,
    step: 500,
    slide: function(event, ui) {
        $("#amount1").val(ui.value + " kr.");
        updateTotal();
    }
});
$("#slider2").slider({
    value: 2700,
    min: 2700,
    max: 27000,
    step: 2700,
    slide: function(event, ui) {
        $("#amount2").val(ui.value + " kr.");
        updateTotal();
    }
});

function updateTotal() {
    var total = $("#slider1").slider("value") + $("#slider2").slider("value");
    $('#amount').val(total);
}​