Skip to content
Related Articles

Related Articles

JQuery | How to implement Star-Rating system using RateYo

Improve Article
Save Article
  • Last Updated : 18 Jan, 2019
Improve Article
Save Article

rateYo:- rateYo is a jQuery plugin to create a star-rating widget that allows to fill the background color of the un-rated part of an SVG(scalable vector graphics) based star on mouse hover. It is Fully customizable and scalable to fit any design needs.

Steps to implement Star-Rating system using RateYo:

  1. Installation:
    1.  # NPM
         $ npm install rateYo
    2. #Bower
         $ bower install rateYo

    you can also use the Google-hosted/ Microsoft-hosted content delivery network (CDN) to include a version of jQuery.

    <!-- Latest compiled and minified CSS -->
    <!-- Latest compiled and minified JavaScript -->

  2. Add the required stylesheet in the head section of html page.

    <link rel="stylesheet" type="text/css" href="jquery.rateyo.min.css"

  3. Create a div that will serve as a star rating container.

    <div id="rateYo"></div>

  4. Add the required stylesheet in the body section of html page and link the javaScript file of the rateYo plugin to perform various functions.

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.rateyo.min.js"></script>

  5. Call a plugin to render a basic star rating into the rateYo div created by you.



<!DOCTYPE html>
    <link rel="stylesheet" 
    <div style="width: 600px; margin: 30px auto">
        <div id="rateYo"></div>
    <script type="text/javascript" 
    <script type="text/javascript" 
            rating: 1.5,
            spacing: "10px",
            numStars: 5,
            minValue: 0,
            maxValue: 5,
            normalFill: 'black',
            ratedFill: 'orange',


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!