JavaScript for the Animated Bar Lightning Web Component

animatedBar.js

/* eslint-disable no-console */
import { LightningElement, track } from 'lwc';

export default class AnimatedBar extends LightningElement {
    @track value = 0;

    handleInputValueChanged(event) {
        window.clearTimeout(this.delayTimeout);

        const final = event.target.value;
        if ( (final) && (final!=this.value) )
        {
            let self=this;
            // eslint-disable-next-line @lwc/lwc/no-async-operation
            this.delayTimeout=setTimeout(() => {
                let increment=1;
                if (final<this.value) {
                    increment=-1;
                }

                console.log('Final = ' + final + ' and value = ' + this.value);
                console.log('Increment = ' + increment);

                    // eslint-disable-next-line @lwc/lwc/no-async-operation
                let timeoutRef = setInterval(function() {
                    self.value+=increment;
                    console.log('In set interval');
                    console.log('value = ' + self.value);
                    console.log('final = ' + final);
                    if (self.value==final) {
                        console.log('Clearing interval');
                        clearInterval(timeoutRef);
                    }
                }, 100);    

            }, 300);
        }
    }

    get width() {
        return `width: ${this.value}%`;
    }

}