It’s always fun playing around CSS to solve some seemingly CSS-only-impossible problems. Years ago my mentor in the front-end team showed us a way to create a star rater with ~ selector and unicode-bidi in CSS 2 (yes, we care a lot about supporting legacy browsers at that time), like a trick but it works, without losing grace unlike most hacks creating a bunch of junk code. Take a look at his code and the result here: http://dabblet.com/gist/4352050.
At the time a member of our team raised a question on how to create a rater for mobile with gesture support, which is, to let the user slide on the gray stars and rate. We didn’t talk too much about it and skipped it. Since then, it’s been left as a question unsolved in my mind. Recently it comes up to me again and at the time of 2018, I think there must be a reachable solution for it. It turns out that this is easy, within these years I’ve read articles about styling input[type="range"] on CSSTricks from time to time, even though it’s never been a sweet dream to developers: A Sliding Nightmare: Understanding the Range Input. Together with clip-path , it’s possible to style the range slider first, then mask it with an SVG star shape and finally create a touchable slider rater. https://codepen.io/simonday/pen/zRrwyP
