09:42 7/6/26 JavaScript Five-Star Rating Plugin
menu
Documentation keyboard_arrow_right Rating
JavaScript Five-Star Rating
Overview
The [Link] plugin is designed to be easily integrated into various web development
environments. Its compatibility with frameworks like React, Angular, and VueJS and its
mobile-friendly design makes it versatile for adding rating functionality to web applications.
React, Angular, and VueJS compatible.
Mobile-friendly interface.
Easy to integrate with several events.
Available as both a JavaScript plugin and a web component.
Documentation
Available Methods
Method Description
getValue(); Get the current value
Set a new value
setValue(number)
@param {int} newValue - Set a new value
Initialization properties
[Link] 1/5
09:42 7/6/26 JavaScript Five-Star Rating Plugin
Property Description
number: number How many stars to be rendered. Default: 5
value: number Initial value. Default: null
tooltip: array Legend for the stars. Default: [ 'Very bad', 'Bad', 'Average', 'Good', 'Very good' ]
Available Events
Method Description
Trigger a method when value is changed.
onchange
onchange(element: DOMElement, value: number) => void
Examples
Five-Star Rating Web Component
Here's a quick example of a five-star rating with a specified value and tooltip:
[Link] 2/5
09:42 7/6/26 JavaScript Five-Star Rating Plugin
<html>
<script src="[Link]
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<jsuites-rating value="4" tooltip="Ugly, Bad, Average, Good,
Outstanding"></jsuites-rating>
<div id='console'></div>
<script>
[Link]('jsuites-rating').addEventListener('onchange',
function(e) {
[Link]('console').innerHTML = 'New value: ' +
[Link];
});
</script>
</html>
Basic Example with Events
Basic example of a five-star rating embed in a web application.
[Link] 3/5
09:42 7/6/26 JavaScript Five-Star Rating Plugin
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<span id='rating1'></span>
<script>
let instance = [Link]([Link]('rating1'), {
value: 4,
tooltip: ['Ugly', 'Bad', 'Average', 'Good', 'Outstanding'],
onchange: function () {
[Link]('changed');
}
});
</script>
</html>
Custom Number Of Stars
Customize the number of stars for the rating plugin with events.
setValue(2)
[Link] 4/5
09:42 7/6/26 JavaScript Five-Star Rating Plugin
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<span id='rating2'></span>
<p><input type="button" value="setValue(2)" id="button" /></p>
<script>
let instance = [Link]([Link]('rating2'), {
number: 10,
tooltip: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
onchange: function () {
[Link]('changed');
}
});
[Link]('button').addEventListener('click', () => {
[Link](2);
})
</script>
</html>
Related Tools
LemonadeJS Rating - Reactive rating component with framework integration
[Link] 5/5