Color Palette Like Rating Plugin For jQuery - Heat Rating

Heat Rating is an ultra-light jQuery plugin which lets you create a horizontal, color palette- and heatmap-style rating control with support for fractional ratings.

Basic usage:

1. Include the style sheet heat-rating.css in the header, and the JavaScript file heat-rating.js after loading jQuery library:

<link rel="stylesheet" href="css/heat-rating.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/heat-rating.js"></script>

2. The required markup structure. Add the following HTML snippets into your webpage and we're done.

<div class="heat-rating">
  <div class="rating-block one" data-value="1.0"></div>
  <div class="rating-block one-half" data-value="1.5"></div>
  <div class="rating-block two" data-value="2.0"></div>
  <div class="rating-block two-half" data-value="2.5"></div>
  <div class="rating-block three" data-value="3.0"></div>
  <div class="rating-block three-half" data-value="3.5"></div>
  <div class="rating-block four" data-value="4.0"></div>
  <div class="rating-block four-half" data-value="4.5"></div>
  <div class="rating-block five" data-value="5.0"></div>
  <div class="ratings">0.0</div>
  <input type="hidden" value="4.5" id="ratings-input">
</div>

---

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