Easy Star Rating System With jQuery And Font Awesome - star-rating.js
File Size: | 5.45 KB |
---|---|
Views Total: | 5537 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

star-rating.js is a simple, lightweight, responsive, customizable, nice-looking star rating system built with jQuery and Font Awesome 6 iconic font.
Features:
- Custom rating symbols.
- Custom star size.
- Allows to specify the number of stars.
- Custom feedback messages.
- Store rating values in a hidden input.
How to use it:
1. Load the jquery.star-rating.js
JavaScript after jQuery library.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/jquery.star-rating.js"></script>
2. Load the latest Font Awesome Iconic Font for stars. You can use any other icon libraries or even emoji for stars by overriding the icon options (see below).
<link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />
3. Create a DIV container to hold the rating system.
<div class="rating"></div>
4. Call the function on the DIV container to create a default 5-star rating system.
$('.rating').starRating({ // ... });
5. Customize the stars.
$('.rating').starRating({ starIconEmpty: 'far fa-star', starIconFull: 'fas fa-star', starColorEmpty: 'lightgray', starColorFull: '#FFC107', starsSize: 4, // em stars: 5, });
6. Customize the feedback message.
$('.rating').starRating({ showInfo: true, titles: ["Very Bad", "Poorly", "Medium", "Good", "Excellent!"], });
7. Customize name of the hidden rating input.
$('.rating').starRating({ inputName: 'rating', });
8. Trigger a function when the rating value changes.
$(document).on('change', '.rating', function (e, stars, index) { alert(`Thx for ${stars} stars!`); });
Changelog:
2022-11-05
- Use Font Awesome 6.x instead
This awesome jQuery plugin is developed by ThomasDev-de. For more Advanced Usages, please check the demo page or visit the official website.