SVG Based Star Rating Control With jQuery - Simple Rater

A simple yet customizable jQuery star rating plugin that uses SVG based rating symbols and supports any fraction of rating value like 1.1, 2.2, 3.3.

How to use it:

1. Make sure both the jQuery Simple Rater plugin and jQuery JavaScript library are included.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.rating.js"></script>

2. Create a unique DIV container for the star rating control.

<div id="rate"></div>

3. Initialize the plugin to generate a basic star rating control.

$('#rate').rating();

4. Customize the star rating control with the following options.

$('#rate').rating({

  // You can pre-set any rating value here. 
  // It should be less than number of Count. 
  // Like if your count is 5, then it should be from 0 to 5
  rate:0,  

  // You can set any value here. 
  // This is size of stars. 
  // Typically ranges between 20-60. 
  size:20,

  // You can set any color code here. 
  // This is color of stars which are not selected.
  primaryColor:"#F4F4F4",

  // You can set any color code here. 
  // This is color of stars which are selected. 
  hoverColor:"#fdb300",

  // You can set 1,2 or 10. 10 is default. 
  // 10 means you can select and get any fraction of value like 1.1, 2.3, 4.6. 
  // If you set 2, it means you can get only half and full value. like 1.5, 2.5, 3, 3.5 etc. 
  // And if you select 1, it means you can get only 1, 2, 3, 4, 5 etc
  scale:10,

  // It means user can change value of rating box or not. 
  // It typically used where you just want to show rating, not to take any input from user.
  readonly:"false",

  // You can set any value here. 
  // This is number of stars. 
  // Typically ranges between 5-10.
  count:5
  
}); 

5. API methods.

// resets the rater and set to 0
$('#rate').rating('refresh');

// returns the value of the rating
$('#rate').rating('val');

// disables the rater
$('#rate').rating('disable');

---

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