Submitted almost 3 years ago

Custom input styles and JS password generation web app

@Jason-Donmoyer

A solution to the Password generator app challenge

Solution retrospective

I have an issue with the linear-gradient that I used to style the range selector input. The color of the slide-bar does not change on mobile or tablet devices. Any input on how to correct this would be much appreciated!

Code

Please log in to post a comment

Community feedback

Minh Le•200
@ledminh
Posted almost 3 years ago
I guess it's because Safari does not support linear-gradient. This article might help.

Or use ms-fill-lower for the left color and ms-fill-upper for the right color in the CSS, like what I did in my solution.

Something like this:
```
input[type=range]::-ms-fill-lower {
        background: base.$color5;
        
}

input[type=range]::-ms-fill-upper {
        background: base.$color4;
        
}
```
If you try, please tell me which one works (or neither of them). I really need to know.
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord