Lightweight jQuery Plugin For Star Rating Widget - Star Rating

File Size: 9.08KB
Views Total: 8536
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Lightweight jQuery Plugin For Star Rating Widget - Star Rating

jQuery Star Rating is a lightweight and fast jQuery plugin allows you to implement a customizable Rating (Vote) Widget on your webpage. The plugin uses data-rating-max attribute to set the max rating value of your rating system.


  • Lightweight and easy to use
  • Supports Hover, Active, Select, Deselect, Minus
  • Selected rating stored as data-attribute, server readable if required
  • Multiple instances on one page
  • Supports all the modern browsers, IE7+, Chrome, Firefox, Safari, etc.

See also:

Basic Usage:

1. Create a container for the star rating widget

<div class="rating" data-rating-max="5"></div>

2. The sample CSS for the widget

.rating {
float: left;
.rating > ul {
list-style: none;
float: left;
padding: 0;
margin: 0;
.rating > ul > li {
float: left;
margin-left: 2px;
background: url(src/star-rating.gif) no-repeat;
width: 25px;
height: 25px;
cursor: pointer;
.rating > ul > li:first-child {
margin-left: 0;
.rating > ul > li.hover {
background-position: -25px;
.rating > ul > {
background-position: -50px;
.rating > span.less {
cursor: pointer;
background: url(src/star-rating.gif) -75px no-repeat;
display: block;
float: left;
height: 25px;
width: 25px;

3. Include the latest version of jQuery library and jQuery Star Rating Plugin on the page

<script src=""></script>
<script src="star-rating.js"></script>

4. Call the plugin

<script type="text/javascript">
minus: true // step minus button

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