Rate Library: Display Variations, Events, and Method Examples
Category: ExamplesThe Rate component enables star-based rating systems with half-star precision and supports custom icons/images for flexible visual styling.
Changing Score Values
By default, each star represents 1 point. Use the increment parameter to change the point value per star.
Setting Initial Value
Use the value parameter to set the initial value. The default range is between 0~5.
The initial value can also be set within the tag content.
The initial value can also be set on a type=range control.
Displaying Title
Use the heading parameter to show a title on the left side.
Showing Tooltip
Set tooltip:true or tooltip.enable:true to display tooltip bubbles.
Tooltips come from the Tooltip module, so you can configure them using the same parameters as the Tooltip module by including them in the tooltip parameter.
Like the result parameter, you can customize tooltip content format using tooltip.format.
Highlight Display
The default display shows continuous highlighting.
Changing Icons
Use the star parameter to change icon class names.
To change icons to images, first set type:image, then set star to the image URL.
Custom Icon Sets
To fully customize each star's icon/image, use the map parameter - an array of objects where each item contains:
Showing Labels
Set label:true or label.enable:true to show default labels below icons.
Label content can be customized using the label.format parameter, which supports template variables id, title, and count.
Setting Input Field
When a rate instance is created, you can inspect the container in developer tools to see it automatically generates an type=range form control, but without a name attribute.
Since output.value = output.stars*increment, when increment is not 1, output.value and output.stars will differ. The fill parameter controls which value gets sent to the type=range control.
Filtering Stars
Set omitted:true to hide grayed-out stars, making the component more compact.
Operation Methods
The rating component provides these main operation methods:
Caching Values
To persist the rating state across page refreshes, set the storName parameter to a unique page-specific value.
Event Listeners
In addition to standard events (ready, initiated, updated, destroyed), these events are available:
Destroying and Initializing
Use destroy() to remove an instance when no longer needed, and init() to reinitialize it.