Simple jQuery Star Rating Widget For Bootstrap 3 - Bootstrap Rating Input

Bootstrap Rating Input is a lightweight jQuery plugin that transform a standard input filed into a simple star rating system with Twitter's Bootstrap 3. The plugin also comes with a function to remove the selected rating.

See also:

How to use it:

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bootstrap-rating-input.min.js"></script>

2. Include Twitter's bootstrap 3 framework on the page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

3. Create a number input field with 'rating' class name on the page. Using data-clearable attribute to define the remove text.

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

4. Default plugin options.

$('input.my_class').rating({
  'min': 1,
  'max': 5,
  'empty-value': 0,
  'iconLib': 'glyphicon',
  'activeIcon': 'glyphicon-star',
  'inactiveIcon': 'glyphicon-star-empty',
  'clearable': false,
  'clearableIcon': 'glyphicon-remove',
  'inline': false,
  'readonly': false,
  'copyClasses': true
});

Change log:

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.