Textarea Counter Demo with jQuery UI Progressbar

This demo adds a jQuery UI Progressbar to the 50-character textarea counter.

0 / 50

jQuery Top ↑

$( "#p1" ).progressbar({
    value: 0,
    max: 50
});

$( "#t1" ).on( "input", function () {
    const length = $( this ).val().length;

    $( "#d1" ).text( length + " / 50" );
    $( "#p1" ).progressbar(
        "value",
        length
    );
});

Progressbar tutorial

Continue Learning jQuery

jQuery Tutorial Home jQuery Basic Structure Functions Used with jQuery jQuery Events jQuery Effects jQuery UI jQuery Exercises

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:

This article is written by plus2net.com team.

plus2net.com

Textarea Counter with Progressbar

jQuery Top ↑

Continue Learning jQuery

Subhendu Mohapatra