Small Rating Controls With Custom Icons - jQuery RatingStars

RatingStars is a small and blazing fast jQuery rating plugin used to view and submit ratings using stars or something else.

How to use it:

1. Download and put the jQuery RatingStars plugin's script after jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous">
</script>
<script src="jquery.rating-stars.js"></script>

2. Load the Font Awesome Iconic Font for the rating symbols (OPTIONAL).

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 
      rel="stylesheet" 
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous">

3. Create the rating stars.

<div class="rating-stars-container">
  <div class="rating-star">
      <i class="fa fa-star"></i>
  </div>
  <div class="rating-star">
      <i class="fa fa-star"></i>
  </div>
  <div class="rating-star">
      <i class="fa fa-star"></i>
  </div>
  <div class="rating-star">
      <i class="fa fa-star"></i>
  </div>
  <div class="rating-star">
      <i class="fa fa-star"></i>
  </div>
</div>

4. Create an input field that displays the rating value.

<input type="number" readonly="readonly" class="rating-value" name="rating-stars-value" id="rating-stars-value">

5. Initialize the rating plugin.

$(".rating-stars").ratingStars();

6. Apply custom styles to the rating stars.

.rating-stars {
  width: 100%;
  text-align: center;
}

.rating-stars .rating-stars-container {
  font-size: 0px;
}

.rating-stars .rating-stars-container .rating-star {
  display: inline-block;
  font-size: 32px;
  color: #555555;
  cursor: pointer;
  padding: 5px 10px;
}

.rating-stars .rating-stars-container .rating-star.is--active,
.rating-stars .rating-stars-container .rating-star.is--hover {
  color: #f1c40f;
}

.rating-stars .rating-stars-container .rating-star.is--no-hover {
  color: #555555;
}

7. Default plugin settings.

$(".rating-stars").ratingStars({
  selectors: {
    starsSelector: '.rating-stars',
    starSelector: '.rating-star',
    starActiveClass: 'is--active',
    starHoverClass: 'is--hover',
    starNoHoverClass: 'is--no-hover',
    targetFormElementSelector: '.rating-value'
  }
});

8. Event handlers.

$(".rating-stars").on("ratingChanged", function (ev, data) {
  $("#ratingChanged").html(data.ratingValue);
});

$(".rating-stars").on("ratingOnEnter", function (ev, data) {
  $("#ratingOnEnter").html(data.ratingValue);
});

$(".rating-stars").on("ratingOnLeave", function (ev, data) {
  $("#ratingOnLeave").html(data.ratingValue);
});

Changelog:

2018-08-11

• Add events.

---

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