Value and Remaining Labels For Progressbars

Extending the jQuery UI progressbar widget to add value and remaining labels.

by Adam Boduch

HTML

<div id="progressbar"></div>
<div>
    <button class="down">Down</button>
    <button class="up">Up</button>
</div>

CSS

body {
    font-size: 0.8em;
}

#progressbar {
    width: 40%;
}

.ui-progressbar-labels span {
    line-height: 2em;
}

.ui-progressbar-labels span:first-of-type {
    float: left;
    margin-left: 0.6em;
}

.ui-progressbar-labels span:last-of-type {
    float: right;
    margin-right: 0.6em;
}

JavaScript

(function( $ ) {
    
    // Defines a custom implementation of the progressbar widget
    // so that we may override it's methods and options.
    $.widget( "app.progressbar", $.ui.progressbar, {
    
        // This method is called any time the progressbar value changes,
        // including when the widget is first instantiated.
        _refreshValue: function() {
        
            // Calls the original "_refreshValue()" implementation.
            this._super();
            
            // Checks for our labels option, and if it's not there,
            // does nothing.
            if ( !this.options.labels ) {
                return;    
            }

            // Adds the "ui-progressbar-labels" class to the progressbar
            // div. Also removing any pre-existing labels since we'll be
            // re-creating them.
            this.element.addClass( "ui-progressbar-labels" )
                        .find( "span" ).remove();
            
            // Adds the "remaining" label.
            $( "<span/>" ).text( this.options.max - this.value() )
                          .prependTo( this.element );            
            
            // Adds the "value" label.
            $( "<span/>" ).text( this.value() )
                          .prependTo( this.element );

        }
        
    });
    
    $(function() {
    
        // Creates the progressbar, passing the new "labels" option.
        $( "#progressbar" ).progressbar({
            value: 37,
            labels: true
        });
    
        // A button to adjust the progressbar value downward.
        $( ".down" ).button({
            icons: { primary: "ui-icon-circle-minus" },
            text: false
        }).on( "click", function( e ) {
            var $progressbar = $( "#progressbar" ),
                value = $progressbar.progressbar( "value" );
            $progressbar.progressbar( "value", value - 1 );
        });
    
        // A button to adjust the progressbar value...