Star Rating Plugin With Fractional Rating Support - jsRapStar

File Size: 5 KB
Views Total: 5719
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Star Rating Plugin With Fractional Rating Support - jsRapStar

jsRapStar is a lightweight, flexible, interactive, customizable jQuery star rating plugin which can be used to display fractional star ratings.

Select rating values with mouse hover & move and rate your products/images/articles by clicking.

How to use it:

1. Include jQuery and the jQuery jsRapStar plugin's files on the html page.

<link rel="stylesheet" href="jsRapStar.css">
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="jsRapStar.js"></script>

2. Create a placeholder for the rating control. You're able to specify the initial rating value in the start attribute:

<div id="example" start="3"></div>

3. Call the function to generate a default star rating control.


4. Specify the number of rating stars. Default: 6.

  length: 5

5. Customize the rating symbol.


6. Customize the appearance of the ring symbol.


  // color
  colorFront: 'yellow',

  // background color
  colorBack: 'white',

  // size in pixels
  starHeight: 32

7. Enable/disable the Fractional Rating Support. Default: false.


  step: true

8. Enable/disable the rating control. Default: true.


  enabled: false

9. Event handlers.


  onClick: function(score){

  onMousemove: function(score){
    $(this).attr('title','Rating: '+score);

  onMouseleave: function(score){
    $(this).attr('title','Rating: '+score);




  • Add animation


  • JS updated


  • code simplification


  • Update


  • Adde mouseLeave event


  • JS & CSS update


  • JS Update

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