A Highly Customizable Star Rating Plugin for jQuery | rateit.js

JQuery evaluation plugin is fast and progressive optimization, touch support, icon font support, unobtrusive and highly customizable JavaScript (with * HTML5 * data attributes), RTL support, support for any number of stars you want, as well as any step size.

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

Key Features:

  • Custom Label Icons: UTF-8 characters, SVG icons, web fonts, etc.
  • Custom step size.
  • Supports AJAX.
  • Can reach.
  • Touch screen and compatible with mobile devices.
  • Incremental improvement. Supports DIV, range slider, and component identification.
  • RTL and tooltip are also supported.
  • Supports the largest possible number of rating stars.
  • Fully reworked via CSS.

How to make use of it:


npm install jquery.rateit

# Bower
bower install jquery.rateit

1. Import the jquery.rateit into your undertaking. Or immediately embrace the next JS & CSS files in your HTML web 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 component for the rating control.

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

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

<!-- 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>
<div class="rateit" data-rateit-backingfld="#backing2" data-rateit-min="0"></div>

3. You’re allowed to config the rating management through the HTML5 data-OPTION attributes:

<div class="rateit" 

4. Or utilizing JavaScript.


  // 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 strategies:

// get value

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

// get max value

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

// get min value

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

// get step size

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

// get readOnly value

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

// get isPreset value

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

// reset

Highly Customizable Rating Plugin, rateit.js Github

See Demo And Download

Official Website(gjunge): Click Here

This superior jQuery/javascript plugin is developed by gjunge. For extra advanced usage, please go to the official website.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…