Simple HTML5 Star Rating System – SimpleStarRating.js

Category: Javascript | April 25, 2016
Views Total:12,381 views
Official Page:Go to website
Last Update:April 25, 2016


Simple HTML5 Star Rating System – SimpleStarRating.js


SimpleStarRating.js is a lightweight JavaScript library used for generating a simple, easy-to-customize star rating system without any 3rd dependencies and icon fonts.

How to use it:

Place the SimpleStarRating.css and SimpleStarRating.js into your html page as follows:

<link rel="stylesheet" href="SimpleStarRating.css">
<script src="SimpleStarRating.js"></script>

Create an empty element to place the star rating system.

<span class="rating"></span>

You can also specify the initial rating value using ‘data-default-rating’ attribute.

<span class="rating" data-default-rating="2.5"></span>

Initialize the star rating system. It will render a basic 5 star rating system inside the element you just created.

var ratings = document.getElementsByClassName('rating');

Specify the number of rating stars you want to use.

<span class="rating" data-stars="10"></span>

Style the rating stars.

.rating {

API methods.

  • disable: Disables the rating from being changed
  • enable: Reenables interactivity
  • setCurrentRating: Changes the current (user-selected) rating (data-rating) and displays it
  • setDefaultRating: Changes the default rating (data-default-rating) and displays it

You Might Be Interested In:

2 thoughts on “Simple HTML5 Star Rating System – SimpleStarRating.js

  1. Remzo

    It all looks good. What do you mean by “initialize the star rating system?”


Leave a Reply