Javascript Rating
The jSuites.rating is a lightweight (1Kb) star rating JavaScript plugin. It can be used as a webcomponent or a vanilla plugin as below.
Webcomponent rating
Value: 4
Source code example
<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<script src="https://jsuites.net/v4/jsuites.webcomponents.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
<jsuites-rating value="4" tooltip="Ugly, Bad, Average, Good, Outstanding"></jsuites-rating>
<div id='console'></div>
<script>
document.querySelector('jsuites-rating').addEventListener('onchange', function(e) {
document.getElementById('console').innerHTML = 'New value: ' + this.value;
});
</script>
</html>
JavaScript star rating plugin
Customize the number of star of the rating plugin.
Source code example
<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
<div id='rating'></div>
<script>
jSuites.rating(document.getElementById('rating'), {
number: 10,
tooltip: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
})
</script>
</html>