A JavaScript progress bar controller

Let’s make a little code snippet designed to make it simple (simpler) to control a HTML progress tag.

You probably know that the <progress> tag can be used to easily create a basic progress bar where you can set a value and a max value and it will fill the progress bar to indicate the percentage that makes up.

<progress value=”50" max=”100"></progress>

For example, this would render a progress bar that is half full.

Here is a little snippet that could be included as a way to make controlling the progress bar easy.

We’ll start again by creating an object constructor method.

function ProgressController(id) {

This function will expect to be passed the id of the progress element it is to manage.

this.element = document.getElementById(id);

We then set an element property and assign it as the DOM element that has the given id using getElementById method.

Then we create a set method that will allow us to set both the maximum amount and the value in one call.

this.set = function(val, max) {
this.element.value = val;
this.element.max = max;
};

We’ll also add functions that will set each value independently.

this.setValue = function(val) {
this.element.value = val;
};
this.setMax = function(max) {
this.element.max = max;
};