Input Field Based Star Rating Plugin With jQuery - simple-rating

Input Field Based Star Rating Plugin With jQuery - simple-rating
File Size: 3.36 KB
Views Total: 7248
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

A dead simple jQuery plugin that converts a normal input field into a 5-star quality/product/post rating system using Font Awesome icons.

How to use it:

1. Add the necessary jQuery library and Font Awesome iconic font to the web page.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">
<script src="" 

2. Add the jQuery simple-rating plugin's files to the page.

<link rel="stylesheet" href="css/simple-rating.css">
<script src="js/simple-rating.js"></script>

3. Call the function and done.


4. The plugin will convert your input field...

<input class="rating">

5. Into these...

<input class="rating" type="hidden" value="3">

<div class="simple-rating star-rating">
  <i class="fa fa-star" data-rating="1"></i>
  <i class="fa fa-star" data-rating="2"></i>
  <i class="fa fa-star" data-rating="3"></i>
  <i class="fa fa-star-o" data-rating="4"></i>
  <i class="fa fa-star-o" data-rating="5"></i><

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