Lightweight Rating System With Custom Icons - jQuery Rating.js

File Size: 44.9 KB
Views Total: 11235
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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.


5. Get the rating value using the click function.

  "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.

  "stars": 10

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

  "half": true

8. Override the default star colors.

  "color": "#222"

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

  "emptyStar": "far fa-star",
  "halfStar": "fas fa-star-half-alt",
  "filledStar": "fas fa-star"

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

  "value": 3

11. Read-only mode is supported as well.

  "readonly": true

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

<div id="dataReadonlyReview"



  • Prevent event handlers from tirggering multiple times


  • Add an ability to update rating element


  • 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.