JQuery | How to implement Star-Rating system using RateYo Last Updated : 18 Jan, 2019 Improve Improve Like Article Like Save Share Report 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: 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 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script> Add the required stylesheet in the head section of html page. <link rel="stylesheet" type="text/css" href="jquery.rateyo.min.css"> Create a div that will serve as a star rating container. <div id="rateYo"></div> 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> Call a plugin to render a basic star rating into the rateYo div created by you. $("#rateYo").rateYo(); Example <!DOCTYPE html> <html> <head> <title>rating</title> <link rel="stylesheet" type="text/css" href="jquery.rateyo.min.css"> </head> <body> <div style="width: 600px; margin: 30px auto"> <div id="rateYo"></div> </div> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.rateyo.min.js"></script> <script> $("#rateYo").rateYo({ rating: 1.5, spacing: "10px", numStars: 5, minValue: 0, maxValue: 5, normalFill: 'black', ratedFill: 'orange', }) </script> </body> </html> OUTPUT Like Article Suggest improvement Next How to create a Star icon using jQuery Mobile ? Share your thoughts in the comments Add Your Comment Please Login to comment... Similar Reads How to Create 5 Star Skills Rating Bar using CSS ? Star Rating using HTML CSS and JavaScript How to Add Star Rating in Next.js ? Semantic-UI Rating Type Star Create a Product Review and Rating System Using HTML CSS and JavaScript How to make Rating using Angular UI Bootstrap ? How to create a Star icon using jQuery Mobile ? Semantic-UI | Rating How to use Rating Component in ReactJS ? ReactJS Semantic UI Rating Module Like K kanugargng Follow Article Tags : Web-Programs JQuery Web Technologies