Mobile-first workflow Using CSS Flexbox and Grid

Hello everyone,

In this challenge, I got the chance to style the range input element, and I think I was able to to do it in some way. However, there are few things that I'm still confused about.

1. In my solution, I used the default min max values of the range input which are 0 and 100, and I set its step attribute to be 25 so that I can have 5 options (0, 25, 50, 75 and 100), then in my Javascript file I had to convert each step to one of the required value in the challenge(0 to 10k, 25 to 50k, 50 to 100k, 75 to 500k and 100 to 1M). In fact, I first tried to use the required values (10, 50, 100, 500, 1000) to be my five steps in the range input, but I wasn't able to do that. From what I understand, steps in the range should follow the step attribute, so they must be consistent. My question is, Is there anyway in which we can use inconsistent values as steps so instead of using 25 as step we can customize the entire range to be 10----50----100---500---1000 ?

2. My second question is about styling the range input, Is it okay to use the pseudo-element of Firefox, Chrome and IE to style the element, or is it not recommended?

Any suggestion, advice or feedback would be appreciated.

Thanks.