A repository of over 1000 quality jQuery plugins

jQuery Raterater

Raterater is a jQuery Rate & Vote plugin.

Created by Bainmullins

jQuery 5 star rating plugin based on Font Awesome icons that allows arbitrary star fractions, variable star sizes, and CSS colors.

Not what you're looking for? Click here to view more Rate & Vote jQuery plugins



jQuery 5 star rating plugin based on Font Awesome icons that allows arbitrary star fractions, variable star sizes, and CSS colors.


Include the font-awesome css file, raterater.css, jquery, and raterater.jquery.js

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="raterater.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-1.4.1.min.js"></script>
<script src="raterater.jquery.js"></script>

Raterater as callback

Write a callbaack function for handling the rating event

function rateAlert(id, rating)
    alert( 'Rating for ' + id + ' is ' + rating + ' stars!' );

Create any number of div elements with unique data-id attributes and optional data-rating attributes

<div class="ratebox" data-id="1" data-rating="2.2"></div>
<div class="ratebox" data-id="2" data-rating="3.6"></div>

Initialize Raterater

$( '.ratebox' ).raterater( { submitFunction: 'rateAlert' } );

Raterater as input field

Create any number of input elements

<input name="service" class="ratebox" value="3">
<input name="delivery" class="ratebox">

Initialize Raterater

$( '.ratebox' ).raterater( { mode: 'input' } );

See demo.html for an example.


Attribute Default Values Description
submitFunction 'submitRating' String A function name that will be called when the user selected a rating. The function should take 2 arguments: id and rating. The id is the data-id of the rating div and the rating is a float representation of the number of stars the user selected.
allowChange false Boolean If set to true, allows the user to change his rating. the submitFunction callback will be called again, so be prepared to handle this in your code.
isStatic false Boolean If set to true, the rating will initialized without any interaction (only for display).
starWidth 20 Integer Width of a star in pixels
spaceWidth 5 Integer Width of a space between two stars in pixels
numStars 5 Integer Total number of stars per rating box
mode 'callback' String Initialzation mode ('callback' or 'input'). Use 'input' to use raterater as form field, or use 'callback' to handle the rating with a custom javascript callback only.
step false Float Specify step increments for ratings. Float number between 0 and 1, for example if you want to allow only half stars, use 0.5, or whole stars use 1.


Change the colors of the stars

/* Star placeholder color */
.raterater-bg-layer {
    color: rgba( 0, 0, 0, 0.25 );

/* Star color on hover */
.raterater-hover-layer {
    color: rgba( 255, 255, 0, 0.75 );

/* Star color after rating */
.raterater-hover-layer.rated {
    color: rgba( 255, 255, 0, 1 );

/* Initial star color */
.raterater-rating-layer {
    color: rgba( 255, 155, 0, 0.50 );

/* Color of the star outline */
.raterater-outline-layer {
    color: rgba( 0, 0, 0, 0.25 );


  • jquery >=1.4.1
  • font-awesome >= 4.2.0


Released under the MIT license.


Bitcoin: 1K38TyxCmSQRALLm6Gzfuz7V7AqQCMrXvy

You might also like these other Rate & Vote jQuery Plugins

  • jQuery-Rate

    A simple jQuery plugin for creating graphical ratings

  • rateit.js

    Rating plugin for jQuery. Fast, Progressive enhancement, touch support, customizable (just swap out the images, or change some CSS), Unob...

  • Angular Rateit

    This directive was inspired by the jQuery (star)rating plugin RateIt. However this package will work without jQuery.