Putting MINUTES in the Max Attribute on a Progress Element

Question

So I have a songDuration variable:

for example:

this.songDuration = 4:20

I am using angular 4, so I am using interpolation to input the value

<progress value="{{songTime}}" max="{{songDuration}}"></progress>

when I do this, I get the error message "The provided double value is non-finite" in the console.

How could I convert this variable to a value that would be compatible with the max attribute?

Answer 1

Try this

convert(input) {
    var parts = input.split(':'),
    minutes = +parts[0],
    seconds = +parts[1];
    return (minutes * 60 + seconds).toFixed(3);
}

Then

this.songDuration = this.convert('4:20');
this.songTime = this.convert('<something else>');

(comment if there was any problem)