jQuery slider how to update div dependent on the value of two other divs?

Question

trying to figure this one out. Been playing with it for a few hours and searching but no success.

Basically, I have these 2 sliders on my page. Each slide updates the text on a div, in this case slider-1-value and slider-2-value are the divs. My goal is to update div "slider-3-value" to a certain amount depending on what is set on slider 1 and 2.

My code

HTML

<div class="mybox">
<div class="pricebox">
    <div class="custom-slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider-1" aria-disabled="false" style="float: left;"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a></div>
<br>
    <span style="float: left;">Rooms: <div id="slider-1-value" style="display: inline;">1</div></span>
<br />
<br />
    <div class="custom-slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider-2" aria-disabled="false" style="float: left;"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 20%;"></a></div>
    <span style="float: left;">Bathrooms: <div id="slider-2-value" style="display: inline;">1</div></span>
    <span style="float: right;">$<div id="slider-3-value" style="display: inline;">50</div><b>/clean</b></span>
</div>
<div id="cleared">
<br />
<p style="text-align: center;"><a class="btn btn--second" href="#">BOOK APPOINTMENT</a></p>
<br />
</div>

jQuery

<script>
$(function() {
//start the sliders
var slider_1 = $( "#slider-1").slider({min: 1, max: 6});
var slider_2 = $( "#slider-2").slider({min: 1, max: 6});

//move other slider depending on the first slider
slider_1.on('slide', function(event, ui) {

    //get the value from the ui
    var value = ui.value;
    $('#slider-1-value').text(value); //update the number beside the slider

    test();

});
    slider_2.on('slide', function(event, ui) {

    //get the value from the ui
    var value2 = ui.value;
    $('#slider-2-value').text(value2)}); // update the number beside the slider 2

    test();

});


function test() {
if ($('#slider-2-value').text() == "5") {

    $('#slider-3-value').text(5);

}
}

</script>

I almost had it working but the slider 3 div would not update unless both were moved and played around with.

Answer 1

Change:

slider_2.on('slide', function(event, ui) {

//get the value from the ui
var value2 = ui.value;
$('#slider-2-value').text(value2)}); // update the number beside the slider 2

test();

to:

slider_2.on('slide', function(event, ui) {
    //get the value from the ui
    var value2 = ui.value;
    $('#slider-2-value').text(value2); // update the number beside the slider 2
    test();
});

DEMO

The call to test() was not inside the handler for slider_2. You did it right for slider_1, which is why slider-3-value didn't get updated until you fiddled with slider 1.

If you had indented your code properly I think you would have noticed this.