Minimal Rating Plugin With jQuery And Material Icons - star.rating.js

star.rating.js is a super tiny jQuery plugin for rendering a simple rating system that uses Material Icons as rating stars.

How to use it:

1. Load the Material Icons in the head section of the html document.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

2. Create a container element for the rating system.

<div class="rating"></div>

3. Initialize the rating system.

$('.rating').addRating();

4. This will generate a hidden input on the webpage like this:

<input type="hidden" name="rating" id="rating">

5. This will generate a hidden input on the webpage like this:

<input type="hidden" name="rating" id="rating">

6. Set the maximum number of rating stars.

$('.rating').addRating({
  max : 5,
});

7. Replace the default rating stars.

$('.rating').addRating({
  icon : 'favorite' // heart
});

8. More default options.

$('.rating').addRating({
  half : true,
  fieldName : 'rating',
  fieldId : 'rating',
  selectedRatings: 0
});

Change log:

2018-05-21

• Set initial ratings

2016-09-08

• toggle selected class on elements to allow users to override star color

---

This awesome jQuery plugin is developed by jvv. For more Advanced Usages, please check the demo page or visit the official website.