Tiny Star Rating System In Vanilla JavaScript

Category: Javascript | September 17, 2020
Views Total:2,912 views
Official Page:Go to website
Last Update:September 17, 2020


Tiny Star Rating System In Vanilla JavaScript


A lightweight, Vanilla JavaScript-only star rating system for ranking products, services, or articles on your web page.


  • Fractional rating support.
  • Custom min/max/intial rating values.
  • Readonly mode.
  • Custom rating symbols. Not only stars.

How to use it:

1. Load the main JavaScript in the document and we’re ready to go.

<script src="./index.js"></script>

2. Create a container in which you want to insert the rating system.

<div class="starRatingContainer">
  <div class="className"></div>
<div class="ratingHolder"></div>

3. Set up the star rating system.

var settings =[{
    // initial rating value
    // max rating value
    // min rating value
    // readonly mode?
    // custom rating symbols here
    // symbol size
    // step size for fractional rating

4. Render the star rating system on the page. Done.

rateSystem("ratingSystem", mySettings, function(rating, ratingTargetElement){
  ratingTargetElement.parentElement.parentElement.getElementsByClassName("ratingHolder")[0].innerHTML = rating;

You Might Be Interested In:

Leave a Reply