Highly Customizable Rating Plugin For jQuery - Rateit.js

Rateit.js is a simple, easy jQuery plugin that helps you generate a highly customizable star rating control from any elements using HTML5 data attributes.

Key features:

• Custom rating symbols: UTF-8 characters, SVG icons, web fonts, etc.
• Custom step size.
• AJAX enabled.
• Accessible.
• Touch-enabled and mobile friendly.
• Progressive enhancement. Supports DIV, range slider and select elements.
• RTL and tooltip supported as well.
• Supports as many rating stars as possible.
• Fully stylable via CSS.

Installation:

# NPM
npm install jquery.rateit

# Bower
bower install jquery.rateit

Basic usage:

1. Import the jquery.rateit into your project. Or directly include the following JS & CSS files on your html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<link href="rateit.css" rel="stylesheet" type="text/css">
<script src="jquery.rateit.js"></script>

2. Create an HTML element for the rating control.

<!-- BASIC -->
<span class="rateit">
</div>

<!-- OR -->
<div class="rateit">
</div>

<!-- OR -->
<input type="range" min="0" max="5" value="0" step="0.5" id="backing1">
<div class="rateit" data-rateit-backingfld="#backing1"></div>

<!-- OR -->
<select id="backing2">
    <option value="1">Bad</option>
    <option value="2">OK</option>
    <option value="3">Great</option>
    <option value="4">Excellent</option>
</select>
<div class="rateit" data-rateit-backingfld="#backing2" data-rateit-min="0"></div>

3. That's it. You're allowed to config the rating control via the HTML5 data-OPTION attributes:

<div class="rateit" 
     data-rateit-starwidth="32" 
     data-rateit-starheight="32"
></div>

4. Or using JavaScript:

$('#rateit-demo').rateit({ 

  // min value
  min: 0, 

  // max value
  max: 5, 

  // step size
  step: 0.5, 

  // 'bg', 'font'
  mode: 'bg', 

  // custom icon
  icon: '★', 

  // size of star
  starwidth: 16, 
  starheight: 16, 

  // is readonly?
  readonly: false, 

  // is resetable?
  resetable: true, 

  // is preset?
  ispreset: false
  
 });

5. API methods:

// get value
$('#rateit-demo').rateit('value')

// set value
$('#rateit-demo').rateit('value', Value)

// get max value
$('#rateit-demo').rateit('max')

// set max value
$('#rateit-demo').rateit('max', Value)

// get min value
$('#rateit-demo').rateit('min')

// set min value
$('#rateit-demo').rateit('min', Value)

// get step size
$('#rateit-demo').rateit('step')

// set step size
$('#rateit-demo').rateit('step', Value)

// get readOnly value
$('#rateit-demo').rateit('readonly')

// set readOnly value
$('#rateit-demo').rateit('readonly', Value)

// get isPreset value
$('#rateit-demo').rateit('ispreset')

// set isPreset value
$('#rateit-demo').rateit('ispreset', Value)

// reset
$('#rateit-demo').rateit('reset')

Changelog:

v1.1.5 (2021-03-11)

• Accessibility fix

v1.1.5 (2021-03-11)

• Fix deprecated jQuery calls with jQuery 3.5

v1.1.4 (2020-12-01)

• Fixed for RTL mode in the CSS.

v1.1.3 (2019-11-26)

• fix bug when using <span> with mode:font

v1.1.2 (2019-03-27)

• tabindex="0" gets only added in readonly mode. When keyboard tabbing, no focus is needed in readonly mode.

---

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