Simple Star Rating Plugin For Bootstrap 4/3 - Rating Input

Bootstrap Rating Input is a lightweight jQuery plugin that transforms a standard input filed into a simple star rating system styling with Twitter's Bootstrap 4 or Bootstrap 3.

Main Features:

• Rating values are stored in the regular input fields.
• Allows you to specify the min/max rating values.
• Custom rating symbols.
• Inline & Read-Online modes.

See also:

• Dynamic jQuery Rating Bar Plugin - ratingbar
• Flexible Star Rating System with jQuery - jRating
• Minimal jQuery Rating Widget Plugin - Bar Rating
• Lightweight jQuery Plugin For Star Rating Widget - Star Rating

How to use it:

1. Include jQuery JavaScript library and the jQuery bootstrap rating input plugin on the page.

<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Bootstrap 3 -->
<script src="/path/to/build/bootstrap-rating-input.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/path/to/build/bootstrap4-rating-input.min.js"></script>

2. Include the latest Bootstrap 4 or Bootstrap 3 framework on the page.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>

3. Include the latest Font Awesome for the rating symbols (Required for Bootstrap 4).

<script src="https://use.fontawesome.com/5ac93d4ca8.js"></script>

4. Create a number input field with 'rating' class name on the page and the plugin will do the rest. You're able to define the remove text by using the data-clearable attribute as follows:

<input type="number" name="My Rating System" id="Demo" class="rating" data-clearable="remove"/>

5. All plugin options to customize the rating system.

DEFAULTS = {

  // min/max values
  'min': 1,
  'max': 5,

  // empty value
  'empty-value': 0,

  // custom icons here
  'iconLib': 'fa',
  'activeIcon': 'fa-star',
  'inactiveIcon': 'fa-star-o',

  // is clearable?
  'clearable': false,
  'clearableIcon': 'fa-remove',
  'clearableRemain': false,

  // inline mode?
  'inline': false,

  // readonly mode?
  'readonly': false,

  // whether to copy CSS classes
  'copyClasses': true
  
}

6. You're also allowed to pass the options via data-OPTION attributes:

<input type="number" 
       name="inputName" 
       id="rating-custom-icons" 
       class="rating"
       data-clearable="remove" 
       data-icon-lib="fa" 
       data-active-icon="fa-heart"
       data-inactive-icon="fa-heart-o" 
       data-clearable-icon="fa-trash-o" 
       value="4" />

Changelog:

2020-07-14

• Added Bootstrap 4 version.

2018-03-13

• Option to disable copying of input classes to rating container

2016-06-08

• Cleanup and bugfixing, bump to version 0.4.0 with readonly and inline features

2016-05-05

• Fixed Clear does not reset to minimum assigned value, it resets to 0

2014-08-23

• Fixed for 0x800a139e - JavaScript runtime error

2014-08-13

• Added a check to avoid issues with AJAX

2014-02-10

• Fixed a bug and prettified some code

v0.2.1 (2014-01-14)

• Added some improvements to the pr for "empty value" use case

---

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