Star Rating custom component

Show and Tell
#1

I needed a small project to decompress, and there’d been some interest in a star rating custom component that supported input, so I put some time into creating it. It no doubt doesn’t support all the features everyone would want, but it gives a starting point for people to customize.

star_rating

Ratings can be set via code to half amounts, but the user can only set ratings on whole amounts.

The component can be set to editable or not, and the size and color of the stars and background is customizable.

https://anvil.works/build#clone:425FR24FERWHALKB=EWDTFUKRCE5AENAIYCC6MTEE

Credit goes to @robert for the original code to display star ratings via Font Awesome icons: Star ratings with icons!

Disclaimer: I don’t normally create custom components based on forum posts, this just happened to coincide with a need of mine.

10 Likes
[Wiki] Awesome custom components, dependencies (and the like)
#2

this is great. thanks! :slight_smile:

2 Likes
#3

I took inspiration from you guys and decided to make my own star rating component my star rating component
It can be customized as follows:

  • max number of stars
  • foreground color
  • allow half ratings (enable you to increment or decrement rating in half steps by clicking)

This was 3 hours of work but was fun ;).

See result here if you dont wanna clone.

6 Likes
#4

Ran into a CSS issue when trying to adjust the icon size of the stars. Found a fix by using the CSS function “setProperty” of font-size. Thank you for the code @jshaffstall !

star_size_debug
star_size_debug1007×154 24.2 KB

2 Likes
#5

Thanks, and welcome to the forum! I updated the dependency with that line.

2 Likes