Lightweight Rating System With Custom Icons - jQuery Rating.js

A lightweight, flexible, mobile-compatible, jQuery based rating system that supports custom star icons, 0.5 fraction, click event handler, and much more.

See also:

• 10 Best Rating Systems In jQuery And Pure JavaScript/CSS

How to use it:

1. Link to jQuery library (slim build) and the rating.js plugin in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/rating.js"></script>

2. By default the plugin uses Font Awesome for the star symbols.

<link rel="stylesheet" href="/path/to/cdn/font-awesome/5.x.x/css/all.min.css" />

3. Create an empty container to hold the rating control.

<div id="review"></div>

4. Call the function on the container to generate a basic rating control.

$(function(){
  $("#review").rating();
});

5. Get the rating value using the click function.

$("#basic").rating({
  "click": function (e) {
    console.log(e); // {stars: 3, event: E.Event}
    alert(e.stars); // 3
  }
});

6. Specify the number of stars to generate. Default: 5.

$("#basic").rating({
  "stars": 10
});

7. Enable/disable half stars. Default: false.

$("#basic").rating({
  "half": true
});

8. Override the default star colors.

$("#basic").rating({
  "color": "#222"
});

9. Customize the rating symbols by overriding the default icon classes.

$("#basic").rating({
  "emptyStar": "far fa-star",
  "halfStar": "fas fa-star-half-alt",
  "filledStar": "fas fa-star"
});

10. Set the initial rating value. Default: 0.

$("#basic").rating({
  "value": 3
});

11. Read-only mode is supported as well.

$("#basic").rating({
  "readonly": true
});

12. You can also pass the options via HTML data attributes as follows:

<div id="dataReadonlyReview"
     data-rating-stars="5"
     data-rating-readonly="true"
     data-rating-value="3"
     data-rating-input="#dataReadonlyInput">
</div>

Changelog:

2020-08-28

• Prevent event handlers from tirggering multiple times

2020-01-02

• Add an ability to update rating element

2019-12-23

• v1.0: Added read-only mode.

---

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