When I looked at this challenge, I thought the main challenges would be the message box and the storage capacity box. So I researched for a solution and came up with the following CSS properties: clip-path, -webkit-appearance, and better usage of before and after pseudo-elements.
I solved the storage capacity box using the before and after elements. However, I also tried using the input[type="range"], progress tag, and meter tag. Unfortunately, each tag has its own disadvantages, and it seems impossible for me to solve it using the above three tags.
Has anyone out there solved the storage capacity bar using input[type="range"], progress, or meter tags?
If you have done it, please share your code and also provide your valuable feedback on the solution.
@9CB5
Posted
I have used an input range in my solution for this challenge and you can view it by looking at my profile.
I found it surprising how difficult it is to style an input range. There's no easy way to create a gradient trail and I had to resort to writing some hacky JS code to match the design. It also renders differently on different browsers so you'll have to style for each browser individually.
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
