Simple Star Rating Plugin For Bootstrap 4/3 - Rating Input
File Size: | 19.7 KB |
---|---|
Views Total: | 29392 |
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:
- 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.