CODEWITHSUNDEEP
javascriptangulartypescript
Mike Landers
Mike Landers

Reputation: 450

Progress bar does not advance correctly

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;
    }

  }

Upvotes: 0

Views: 84

Answers (1)

Sharikov Vladislav
Sharikov Vladislav

Reputation: 7269

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()".

Upvotes: 3

Related Questions