jQuery module that provide rating capabilities

jquery, rating, esl
bower install jq-rating


jq-rating (1.0.3)

jQuery plugin to display "stars" (or something else) based ratings


You can find some demos here : http://esleducation.github.io/jq-rating/


You can simply download or clone the repo, or install using bower like this

bower install jq-rating

Get Started

First, you need to include the scripts and css in your page

<link href="jq-rating.css" rel="styletheet" type="text/css" />
<!-- optional font-awesome to have access to icons -->
<link href="font-awesome.css" rel="styletheet" type="text/css" />

<script src="jquery.js"></script>
<script src="jq-rating.js"></script>

Then you just have to init the plugin as you do with all others jQuery plugins

<span data-jq-rating></span>

<!-- or if you need to specify where each elements are goiing to stand -->
<span data-jq-rating>
    <span data-jq-rating-stars></span><!-- display the stars here -->
    <span data-jq-rating-grade></span><!-- display the grade (value) here -->
jQuery(function($) {

    // init the plugin on all "data-jq-rating" elements


See the index.html file for full sample


There are all the options available

  • value : the actual rating value
  • basedOn : the max rating value
  • starsCount : how many "stars" you want
  • updateOn : when you want that the value is updated (click | hover)
  • iconClass : the class to use for icons (default : fa fa-star)
  • editable : define if the rating is editable or not
  • levelsClasses : array of levels that will be applied on container with pattern : jq-rating--{level}
  • onChange : callback when the value change (params : value, api)not after the stars

Each of these options can be passed to the plugin options, or can be put directly on the element like this

<span data-jq-rating
        data-jq-rating-icon-class="fa fa-user">


jq-rating provide some attributes that you can use to display informations where you want in your html

  • data-jq-rating-stars : This attribute tell where to inject the stard
  • data-jq-rating-grade : This tell where to inject the value. Can be applied also on input or textarea

If the attribute data-jq-rating-stars is not present, the stard will be injected directly on the element on witch the plugin is instanciated


These are the diferent classes that are applied

  • jq-rating : The container
    • jq-rating--level-xlow : Applied on the container when the rating level is extra-low
    • jq-rating--level-low : Applied on the container when the rating level is low
    • jq-rating--level-medium : Applied on the container when the rating level is medium
    • jq-rating--level-high : Applied on the container when the rating level is high
    • jq-rating--level-xhigh : Applied on the container when the rating level is exta-high
    • jq-rating--editable : Applied on the container when the rating is editable
  • jq-rating-group : The group of stars
    • jq-rating-group--hover : The group of stars that will be active (the width of this element will be set by the plugin)
    • jq-rating-group--interaction : The group of stars used only for interaction. This group shares the --hover class but a color:transparent; is set on each stars in this group
  • jq-rating-star : The star that contain a "i" tag
    • jq-rating-star--active : Applies on the stars that are active

Updating a form input

It can be usefull to be able to update a form input with the value of an editable rating. This is how you can do this

<form name="myForm" action="#" method="POST">

   <span data-jq-rating
      <span data-jq-rating-stars></span>
      <input type="text" data-jq-rating-grade />


The attribute data-jq-rating-grade will take car of updating the field value accordingly. This works in two ways, mean that if you update the field, the rating will update itself.