CODEWITHSUNDEEP
javascripthtmlcssangularrange
Learner.123
Learner.123

Reputation: 177

Unable to customize html range input

I need to customize the range input. The slider must be green for the lower part(the area which the thumb has moved) and the remaining should be grey. Basically I have changed the default styles from blue and grey to green and grey. Everything works fine as long as the min and max is the default which is min=0,max=100. But as soon as I change these values to 100000 and 300000 the slider colors do not change as expected(if the slider has moved 20% of the total length then that much should become green, and the remaining 80% must be grey). Please see this code: https://stackblitz.com/edit/angular-w885ke?file=src%2Fapp%2Fapp.component.ts

Can anyone suggest a fix for this. Thanks!

Upvotes: 0

Views: 84

Answers (1)

Hp Lam
Hp Lam

Reputation: 357

You can try this calculation: percentage = ((input - min) * 100) / (max - min)

So use:

sliderDisplay = (((this.rangeValue - 100000) * 100) / (300000 - 100000)).toFixed();

instead of:

sliderDisplay = ((this.rangeValue / 300000) * 100).toFixed();

Refer: https://stackblitz.com/edit/angular-yuggup?file=src/app/app.component.ts

Upvotes: 1

Related Questions