Article: Single HTML Element Star Rating Component

Over the past few weeks, I have created some input ranges that look completely different even when they are the same underlying HTML –Thanks, CSS!

I shared them on CodePen, and now I wrote an article about the process. It's a bit long (which is funny as it doesn't get into much technical details 😳), and I will publish it later this week. You get early access as a patron!

https://alvaromontoro.com/blog/68069/single-element-star-rating-system

------

Here are some examples of what can be created with a single HTML range input (also linked in the article):

• A star rating system: https://codepen.io/alvaromontoro/pen/azoyvgR

• An oddly-shaped range: https://codepen.io/alvaromontoro/pen/RNbjwjB

• "Emoji" user satisfaction: https://codepen.io/alvaromontoro/pen/Wbezqmy