Custom range slider, mobile-first, pixel-perfect w/ HTML & CSS & JS

What are you most proud of, and what would you do differently next time?

Hello 👋👋👋

Thanks to fronendmentor team, this challenge gave me an opportunity to learn more about accessibility when building custom component and it is fun!

🚀 Built with

• Semantic HTML
• Pure CSS
• Vanilla JavaScript
• ARIA APG Guides

🐲 What i have done

• Used my own judgement to achieve pixel-perfect without design files
• Built an range slider utilized native input type="range" with custom draggable thumb for visual users and accessibility for screen readers (tested with NVDA)
• Overridden default focus effect with outline on button, input

🐦 Things to improve

• My JS source code is messy, i am thinking about using TypeScript for stronger static types next time when i came back for this challenge again
• Figure out a system to handle CSS font custom variables across all components

What challenges did you encounter, and how did you overcome them?

None 🐱

What specific areas of your project would you like help with?

Any feedback is appreciated 🙏