Add a condition to the Star Rating Input so that it changes color depending on which star is hovered

I’m creating this site were users can rate and review something.

Rate is done through Star Rating input.

Obviously, 1 star is bad and 5-star is awesome.

What I want to do is the following:

As the user wants to enter a rating, I want the stars color to change depending on which star is hovered or pressed.

Therefore, the default, page-load color of the stars is grey. Then, when the Star Input is hovered over star n1, the star color changes to red; in star n2 the color changes to orange; in star n3 to yellow; star n4 to light green; and star n5 to dark green.

I’m testing different options here trying to make it work, with 0 results so far.

But I’m confident there is a way to do this.

Please help me and thanks in advance for your help!

And another very important question in this regard is: how can I assign a number value to each star value? Thanks!

I think the best option would be to group 5 star icons (fa, ionic, material, etc) into a Group Element, each star set to fixed width. Go to each star and create conditional statements:

Star 1

IF [this star] is hovered THEN icon color = #ff0000

If you want this scenario to occur: when star 4 is hovered, all stars from 1-4 are highlighted their respective colors, then you need to create more conditional statements on each star, ie:

Star 4

IF [this star] is hovered THEN...
[star 1] icon color = #FF0000
[star 2] icon color = #FFA500
[star 3] icon color = #FFFF00
[this star] icon color = #4CA64C

If you want all stars to take on the same color, just change the color hex codes to fit your needs.

For each star, you must specify all potential states it should appear as and when that state is true (in this case, when each star is hovered). You could also trigger conditions based on another element on the page being hovered.

1 Like

OK. I’m gonna try this and let you know (tomorrow?) how it worked out.

Thanks for your support @philip!

This topic was automatically closed after 70 days. New replies are no longer allowed.