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

Simple Star Rating Plugin For Bootstrap 4/3 - Rating Input
File Size: 19.7 KB
Views Total: 27642
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.