Minimal Rating Plugin with jQuery and Font Awesome - Rate Picker

Rate Picker is a jQuery plugin for help you inserting a simple rating widget on your webpage.

Features:

• Uses Font Awesome for rating symbols.
• Custom number of rating symbols.
• Custom colors and cursors.
• Callback function.

How to use it:

1. Load the required Font Awesome 4 icon font in the head section of the html page.

<link rel="stylesheet" href="font-awesome.min.css">

2. Load the jQuery rate picker plugin in the html page which has jQuery library installed.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/jquery-rate-picker.js"></script>

3. Create an inline element for the rating widget and specify the initial value using data-stars attribute.

<span id="demo" data-stars="3"></span>

4. Call the function on the element and the data will be posted as <input type="hidden" name="demo" />.

$.ratePicker("#demo");

5. Execute a callback function after rating.

$.ratePicker("#demo", {
  rate : function (stars){
    alert('Rate is ' + stars);
  }
});

6. All configuration options.

$.ratePicker("#demo", {

  // maximum number of rating symbols
  max :5,

  // custom colors
  rgbOn:"#e74c3c",
  rgbOff:"#ecf0f1",
  rgbSelection:"#e74c3c",

  // custom cursor
  cursor:"crosshair",

  // custom rating symbol
  indicator:"fa-thumbs-up"

});

Changelog:

2019-11-12

• Set back value on mouse leave

---

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