Star

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: numberHow many stars to be rendered. Default: 5
value: numberInitial value. Default: null
tooltip: arrayLegend for the stars. Default: [ 'Very bad', 'Bad', 'Average', 'Good', 'Very good' ]


Available Events

Method Description
onchangeTrigger 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>

Go to the quick reference