Star Ratings

We are using for our star rating component. RateYo! is a tiny and flexible jQuery star rating plugin, it uses SVG to render rating, so no images required.
Read the official RateYo Documentation for a full list of instructions and other options.


In order to use RateYo on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<link rel="stylesheet" href="assets/vendor/libs/rateyo/rateyo.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/rateyo/rateyo.js"><script>



To create ratings just create a <div>, initialize and thats it!

<div class="basic-ratings"></div>
  rating: 3.6

Read Only

Use data-rateyo-read-only="true" attribute with HTML element or use readOnly property in JS to create a read only ratings

<div class="read-only-ratings" data-rateyo-read-only="true"></div>
  rating: 2

Custom SVG

Use starSvg property to use custom svg icon.

<div class="custom-svg-ratings"></div>
  rating: 3.2,
  starSvg: YOUR_SVG

Half Star

Use data-rateyo-half-star="true" attribute with HTML element or use halfStar property.

<div class="half-star-ratings" data-rateyo-half-star="true"></div>
  rating: 2

Full Star

Use data-rateyo-full-star="true" attribute with HTML element or use fullStar property.

<div class="full-star-ratings" data-rateyo-full-star="true"></div>
  rating: 2

Multi Color

Use multiColor property and pass startColor and endColor.

<div class="multi-color-ratings"></div>
  multiColor: {
    startColor: COLOR,
    endColor: ANOTHER_COLOR


Refer below example to use ratings events.

onSet Event
onChange Event
<div class="row">
  <div class="col-md d-flex flex-column align-items-start mb-sm-0 mb-3">
    <small class="text-light fw-medium">onSet Event</small>
    <div class="onset-event-ratings"></div>

  <div class="col-md d-flex flex-column align-items-start">
    <small class="text-light fw-medium">onChange Event</small>
    <div class="onChange-event-ratings"></div>
    <div class="counter-wrapper mt-3">
      <span class="fw-medium">Ratings:</span>
      <span class="counter"></span>
// onSet Event
$('.onset-event-ratings').rateYo().on('rateyo.set', function(e, data) {
  alert('The rating is set to ' + data.rating + '!');

// onChange Event
$('.onChange-event-ratings').rateYo().on('rateyo.change', function(e, data) {
  var rating = data.rating;


Refer below example to use ratings methods.

<div class="methods-ratings"></div>
<button class="btn btn-primary btn-initialize">Initialize</button>
<button class="btn btn-danger btn-destroy">Destroy</button>
<button class="btn btn-success btn-get-rating">Get Ratings</button>
<button class="btn btn-info btn-set-rating">Set Ratings to 1</button>
var $instance = $('.methods-ratings').rateYo()

// Init Ratings
$('.btn-initialize').on('click', function() {

// Destroy Ratings
$('.btn-destroy').on('click', function() {

// Get Ratings
$('.btn-get-rating').on('click', function() {
  var rating = $instance.rateYo('rating');
  window.alert('Current Ratings are ' + rating);

// Set Ratings
$('.btn-set-rating').on('click', function() {
  $instance.rateYo('rating', 1);


Refer below mentioned for all the variables

Variable Description
$unratedStarColor Variable for unrated stars fill
$ratedStarColor Variable for rated stars fill
© 2017- Pixinvent, Hand-crafted & Made with ❤️