Hi all,
I’ve released an advanced version of a Star Rating control plugin which I’ve rammed with useful calculations, states, actions, events etc that I could think of.
It’s more of a user experience rating control I suppose since you don’t have to display stars. It contains a lot of configurable options which allow you to control things like the number of stars, the ratings, star sizes, precision values, star spacing, colours, max rating values plus more.
It utilises SVG images to render the ratings which make it very quick to use and the images are customizable too, so it’s possible to use your own SVG images if you don’t want to use the standard stars for example.
Here’s an image of some customized ratings…
Or you could stick with the standard stars…
PLUGIN
Star Rating Advanced Plugin | Bubble
EDITOR
Paul-testing-4 | Bubble Editor
DEMO
https://paul-testing-4.bubbleapps.io/star_rating
Outlined below are all the options, states, descriptions etc.
ELEMENTS
Star Rating Advanced
This is the visual element dragged onto the page which contains the following field options.
-
Star width
The width of each star, the width of a star is always equal to its height. Setting this value to 0 allows the star width to be auto calculated to fit the elements length. The elements height will also be adjusted to match the height of the stars. -
Background fill color
The background color for the un-rated part of a star. -
Rated fill color
The color for the rated part of a star. -
Multi-color enable
Enables star multi-color. -
Start color
Start star color when multi-color mode is enabled. -
End color
End star color when multi-color mode is enabled. -
Number of stars
Number of stars to use, to display the rating. -
Rating
Star rating, this value can be given in either percentage or number. You can use this to set a default rating when the element is initially displayed. -
Max rating value
The maximum value, you want the rating to end with. -
Precision
The precision value of the rating. -
Steps (half/full)
Rating will be displayed in steps of 0.5 (half) or 1 (full). To disable this, leave the field blank. -
Spacing
The amount of space between stars in pixels. -
Right to Left
Render the rating Right to Left. -
Style
Choose from a pre-set style of stars to display or select the Custom option where you can define your own star below in the Custom field. You can see these styles in the screenshots above. -
Custom SVG
Use this to define a custom shape to make up an image to display. The custom shape must be in the form of a SVG string and ideally have an aspect ratio of 1:1 so it displays correctly.
Scroll down this page to see an example of how you can set your own shapes.
EXPOSED STATES
-
Star width
Shows the width of each star. -
Background fill color (hex)
Shows the background color of the star (hex). -
Rated fill color (hex)
Shows the rated color of the star (hex). -
Multi-color enable
Shows if multi-color is enabled or not. -
Start color (hex)
Shows the start color when multi-color is enabled (hex). -
End color (hex)
Shows the end color when multi-color is enabled (hex). -
Background fill color (rgb)
Shows the background color of the star (rgb). -
Rated fill color (rgb)
Shows the rated color of the star (rgb). -
Start color (rgb)
Shows the start color when multi-color is enabled (rgb). -
End color (rgb)
Shows the end color when multi-color is enabled (rgb). -
Number of stars
Shows the number of stars displayed. -
Rating max value
Shows the maximum value for the rating to end with. -
Rating precision
Shows the precision of the rating. -
Rating
Shows the rating value of the star control. -
Error
Shows the last error that occurred. -
Stars selected
Shows the number of stars that have been selected. -
Steps
Shows the steps as half or full. -
Spacing
Shows the amount of space between the stars. -
Right to Left
Shows if the rating is rendered from Right to Left.
EVENTS
-
A Star Rating Advanced has errored
Fired when an error as occurred. -
A Star Rating Advanced has been set
Fired when the rating has been set.
If you want more let me know.
ACTIONS
Set star width on a star rating
Changes the width of a star.
-Star width
The width of each star in pixels, the width of a star is always equal to its height. Setting this value to 0 allows the star width to be auto calculated to fit the elements length. The elements height will also be adjusted to match the height of the stars.
-Resize element
When this option is set to Yes, the elements width and height will be adjusted to fit.
Multi-color mode update on a star rating
Enables or disables multi-color mode.
-Enable
Set the value to Yes to enable multi-color mode. Set the value to No to disable it.
-Start color
Sets the Start star color.
-End color
Sets the End star color.
Set star colors on a star rating
Sets the background and rated star colors.
-Background fill color
The background color for the un-rated part of a star.
-Rated fill color
The color for the rated part of a star.
Set number of stars on a star rating
Set the number of stars to show.
-Number of stars
Number of stars to show.
Set max rating value on a star rating
Set the maximum value for the rating to end with.
-Max rating value
The maximum value, you want the rating to end with once the last star is selected.
Set precision of rating on a star rating
Set the precision value of the rating.
-Precision value
The precision value of the rating.
Set rating on a star rating
Set the rating value for the star control.
-Rating value
Star rating, this value can be given in either percentage or number. You can use this to load a default rating value which is set when the control is initially displayed.
Set steps on a star rating
Set the steps as half or full stars.
-Steps (half/full)
Rating will be displayed in steps of 0.5 (half) or 1 (full). To disable this, leave the field blank.
Set spacing on a star rating
Set the amount of space between stars.
-Spacing
The amount of space between stars in pixels.
Right to Left on a star rating
Render the rating Right to Left.
-Right to Left
Render the rating Right to Left.
Change color specific star on a star rating
Experimental action - By default, after the color has been changed on the ‘rated’ part of a star, it will always revert back to it’s original color when hovered again to maintain the rating functionality. However, if you change the color on the ‘un-rated’ part of a star (background fill), it will stay set to that color even when hovered.
-Star number
Enter the star number you want to change the color for. Note: Setting this number to a value higher than the amount of stars you have displayed, will target the first star.
-Star color (rated)
Choose a color for which you want the 'rated' part of a star to change to.
-Star color (un-rated)
Choose a color for which you want the 'un-rated' part of a star to change to.
CUSTOM STYLES
The custom styles section becomes in use when the style dropdown option has been set “Custom”.
The Custom SVG text field should contain an SVG string. For example, you could enter the value below which would generate a box with a tick inside it.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0v24h24v-24h-24zm11 17l-5-5.299 1.399-1.43 3.574 3.736 6.572-7.007 1.455 1.403-8 8.597z"/></svg>
The shapes in this website (https://iconmonstr.com/) fit well with this plugin. You should choose shapes that ideally have an aspect ratio of 1:1 so it displays correctly. Once you’ve found a shape, agree to the license and then click the <Embed.> button which gives you the code to paste straight into the Custom SVG field.
Hope you enjoy!
Paul
