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.
Quick reference
Considering the example below:
<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> var myRating = jSuites.rating(document.getElementById('rating'), { value: 3, tooltip: [ 'Very bad', 'Bad', 'Average', 'Good', 'Very good' ], }); </script> </html>
Available Methods
Method | Description |
---|---|
myRating.getValue(); | Get the current value |
myRating.setValue(number) | Set a new value @param int newValue - Set a new value |
Initialization properties
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 |
---|---|
onchange | Trigger a method when value is changed. onchange(element: DOMElement, value: number) => void |
Examples
Rating as a webcomponent
Quick five start rating example with a specified value and tooltip.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>