Read One Progressbar and Update Another

The first Progressbar can be changed with the buttons. The second is always set to half of the first bar's current value, preserving the original two-bar relationship.

HTML Top ↑

<div id="progress_bar1"></div>
<div id="progress_value1"></div>
<button type="button" id="b2">−</button>
<button type="button" id="b1">+</button>

<div id="progress_bar2"></div>
<div id="progress_value2"></div>

jQuery Top ↑

$( function () {
    const $bar1 = $( "#progress_bar1" );
    const $bar2 = $( "#progress_bar2" );

    $bar1.progressbar({
        value: 60,
        max: 200
    });

    $bar2.progressbar({
        value: 30,
        max: 100
    });

    function updateBars( amount ) {
        const max1 = $bar1.progressbar(
            "option",
            "max"
        );

        const current1 =
            $bar1.progressbar( "value" );

        const next1 = Math.max(
            0,
            Math.min( max1, current1 + amount )
        );

        const next2 = next1 / 2;

        $bar1.progressbar( "value", next1 );
        $bar2.progressbar( "value", next2 );

        $( "#progress_value1" ).text(
            next1 + " / " + max1
        );

        $( "#progress_value2" ).text(
            next2 + " / " +
            $bar2.progressbar( "option", "max" )
        );
    }

    $( "#b1" ).on( "click", function () {
        updateBars( 10 );
    });

    $( "#b2" ).on( "click", function () {
        updateBars( -10 );
    });
});

← Progressbar tutorial Single Progressbar demo →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: