JQuery | How to implement Star-Rating system using RateYo Improve Improve Improve Like Article Like Save Article Save Share Report issue 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 Last Updated : 18 Jan, 2019 Like Article Save Article Previous jQuery | Misc get() Method Next Bootstrap Buttons with Examples 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 Trending in News View More 10 YouTube Alternatives to Stream Music Online in 202412 Best Paint 3D Alternatives in 202410 Best Pixlr Alternatives for Android in 2024 [Free + Paid]Bougie Definition and Usage Examples 30 OOPs Interview Questions and Answers (2024)