jQuery password strength meter

jQuery has been quite impressive right from the word go, even though I did nothing "real world" with it.
I stumbled across a password strength meter done using normal javascript and CSS.
I instantly decided to jQuery it -- without the password rules and in fact, even without the password field!.
All you have to do is enter a "percentage" of how strong the password is and the meter will be displayed.
Since this is of the "Get a percent, display it as a meter" kind, it can be used for stuff OTHER THAN password meters too.. Like a "You have used xx% of your mailbox" or something similar..

Without much ado, here's my attempt and the source code:

Demo -- Enter a number (zero or more) and click Change:

Code:

<script src="jquery-1.2.3.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#changemeterpercentbutton").click(function() { //Assign a callback function to the "change" button
var iPercent = $("#meterpercent").val(); //Get the percent value from the textbox
var percent = iPercent + "%"; //Just add a "%" sign to it -- to be used in CSS

iPercent = parseInt(iPercent); //Get the numeric form of the percentage -- for comparisons
if(iPercent > 100) { // Cap the percentage to a max of 100
iPercent = 100;
percent = "100%";
}
$("#meterdescription").html(percent); // Display the percentage (with the % sign) below the meter

// Handle the styles for the meter for different percentage ranges
if(iPercent <= 20) {
$("#meter").css({width: percent, background: "#56e500"});
} else if(iPercent <= 40) {
$("#meter").css({width: percent, background: "#399800"});
} else if(iPercent <= 60) {
$("#meter").css({width: percent, background: "yellow"});
} else if(iPercent <= 80) {
$("#meter").css({width: percent, background: "#ff5f5f"});
} else if(iPercent > 80) {
$("#meter").css({width: percent, background: "#ff0000"});
}
}).click(); //Programatically call the click function on page load so that the percentage meter is displayed on page load (using the default text box value)
});

</script>

<style>

.metercontainer {
width: 150px;
}
#meter {
height: 10px;
}
</style>


<input type="text" name="meterpercent" id="meterpercent" value="40">
<input type="button" name="changemeterpercentbutton" id="changemeterpercentbutton" value="Change">
<br>
<div class="metercontainer">
<div id="meter" class="grey"></div>
<div id="meterdescription"></div>
</div>