Docs : Star Ratings - Extended UI | Sneat

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.

Usage

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>

Examples

Basic

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

<div class="basic-ratings"></div>

$('.basic-ratings').rateYo({
  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>

$('.read-only-ratings').rateYo({
  rating: 2
});

Custom SVG

Use starSvg property to use custom svg icon.

<div class="custom-svg-ratings"></div>

$('.custom-svg-ratings').rateYo({
  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>

$('.half-star-ratings').rateYo({
  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>

$('.full-star-ratings').rateYo({
  rating: 2
});

Multi Color

Use multiColor property and pass startColor and endColor.

<div class="multi-color-ratings"></div>

$('.multi-color-ratings').rateYo({
  multiColor: {
    startColor: COLOR,
    endColor: ANOTHER_COLOR
  }
});

Events

Refer below example to use ratings events.

onSet Event

onChange Event

Ratings:

<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>

  <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>
    </div>
  </div>
</div>

// 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;
  $(this)
    .parent()
    .find('.counter')
    .text(rating);
});

Methods

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() {
  $instance.rateYo();
});

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

// 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);
});

Variables

Refer below mentioned for all the variables

Variable	Description
`$unratedStarColor`	Variable for unrated stars fill
`$ratedStarColor`	Variable for rated stars fill