Javascript Rating

Javascript five star plugin with material icons.


1

Examples


Javascript rating webcomponent

<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<script src="https://bossanova.uk/jsuites/v2/jsuites.webcomponents.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

// Current value: 4, number of starts: 5
<jsuites-rating value="4" number="5" tooltip="Very bad, Bad, Average, Good, Very good"></jsuites-rating>

</script>
document.querySelector('jsuites-rating').addEventListener('onchange', function(e) {
    console.log('New value:' + this.value);
});
</script>
</html>


Basic five start rating


<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<div id='rating'></div>
<div id='console'></div>

<script>
jSuites.rating(document.getElementById('rating'), {
    value: 3,
    onchange: function(el, val) {
        document.getElementById('console').innerHTML = val + ' star selected';
    },
    tooltip: [ 'Very bad', 'Bad', 'Average', 'Good', 'Very good' ],
});
</script>
</html>


2

Methods

getValue();Get the current value
setValue(newValue);Set a new value
@param int newValue - Set a new value


3

Events

onchangeTrigger a method when value is changed.


3

Initialization options

var defaults = {
    // Initial value 0-5
    value: null,
    // Tooltip
    tooltip: [ 'Very bad', 'Bad', 'Average', 'Good', 'Very good' ],
    // Event onchange
    onchange: null,
};