Minimal Rating Plugin with jQuery and Font Awesome - Rate Picker

File Size: 4.23 KB
Views Total: 3597
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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="//"></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" />.


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

  // custom cursor

  // custom rating symbol




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