Change Progressbar Value with Buttons

Use the buttons to increase or decrease the Progressbar by 10. The modernized version clamps the value between 0 and the configured maximum and displays the value in a separate text label instead of writing into jQuery UI's internal generated element.

HTML Top ↑

<div id="progress_bar"></div>
<div id="progress_value" aria-live="polite"></div>

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

jQuery Top ↑

$( function () {
    const $bar = $( "#progress_bar" );
    const $label = $( "#progress_value" );

    $bar.progressbar({
        value: 60,
        max: 100
    });

    function updateBy( amount ) {
        const max = $bar.progressbar(
            "option",
            "max"
        );

        const current = $bar.progressbar( "value" );

        const next = Math.max(
            0,
            Math.min( max, current + amount )
        );

        $bar.progressbar( "value", next );
        $label.text( next + "%" );
    }

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

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

← Progressbar tutorial Two Progressbars →

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: