Flexible Star Rating Widget with jQuery and SVG - 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 based star on mouse hover. Fully customizable and scalable to fit any design needs.

Installation:

# NPM
$ npm install rateYo

# Bower
$ bower install rateYo

How to use it:

1. Add the required stylesheet in the head section of the document.

<link rel="stylesheet" href="jquery.rateyo.min.css">

2. Create a DIV element that will serve as a star rating container.

<div id="demo"></div>

3. Call the plugin to render a basic star rating into the DIV element you created.

$("#demo").rateYo();

4. Available options and defaults.

$("#demo").rateYo({

// The width of each star
starWidth: "32px",

// The background color for the un-rated part of a star
normalFill: "gray",

// The background color for the rated part of a star
ratedFill: "#f39c12",

// Number of stars to use
numStars: 5,

// The Minimum value, you want the rating to start with.
minValue: 0,

// The Maximum value, you want the rating to end with.
maxValue: 5,

// The precision of rating.
precision: 1,

// The rating can be given in either percentage or number,
rating: 0,

// Called whenever the rating is changed.
onChange: null,

// Called whenever the rating is set by click. 
onSet: null

});

4. Public methods

// Get rating

$rateYo.rateYo("method", "rating");

// Ser rating

$rateYo.rateYo("method", "rating", rating);

// Destroy

$rateYo.rateYo("method", "destroy");

5. Events

// fired when ever the rating is set.

$("#demo").rateYo().on("rateyo.set", function (e, data) {

  // do something

});

// fired when ever the rating is change.

$("#demo").rateYo().on("rateyo.change", function (e, data) {

  // do something

});

Changelog:

2018-09-12

• v2.3.5

2018-08-29

• v2.3.4

2017-04-22

• v2.3.2

2017-04-11

• v2.3.0

---

This awesome jQuery plugin is developed by prrashi. For more Advanced Usages, please check the demo page or visit the official website.