Progress bar does not advance correctly

Question

I developed a progress bar that, when clicked, advances every 25, starting at 0.

When loading the object, some of them already contain some progress. My problem is that on the first click to advance the bar, sometimes it gets lost and I don't know why it happened. For example, progress is at 75%, when I click on it to advance to 100% it goes to 25% for no apparent reason. Does anyone know why this happened?

Code

upd(event, data) {
    let percentage: number = Math.floor(
      (event.layerX / (event.target.offsetWidth - 3)) * 100
    );

    const previous = parseInt(this.percentage);
    if (previous > percentage) {
      percentage = previous - 25;
    } else {
      percentage = previous + 25;
    }

  }

score 3 · Accepted Answer · answered Jan 29 '20 at 10:30

The problem here is that you share one class property percentage across many sliders.

Here is fixed demo: https://stackblitz.com/edit/angular-p2t9cn

Instead of sharing one class property, you have to compare stuff with data of particular slider.

So, one of the options to fix your demo is to change parseInt(this.percentage) to data.data.progress in updateSlider method.

Also, be carefull about such usage of parseInt :) You can check this answer: Problems with javascript "parseInt()".

Progress bar does not advance correctly

1 Answers1