Imagine I have a RatingGroup with 5 total stars, and the current value is 2. Now, I hover over the 4th star.

This will happen:

star 1,2,3 and 4 have data-highlighted and star 2 has data-checked.

I propose stars 3 and 4 gain a data-in-range attribute, so I can style them differently (to indicate that they are not yet selected)

Like, star 1 and 2 have a solid color (because they are already selected)

star 3 and 4 have a less saturated color (because they will be selected if you click)

star 5 is grey (because it isn't highlighted in any way)