Simple Star Rating Input Plugin - jQuery rating.js

A really simple and lightweight jQuery star rating plugin that stores the rating value in a hidden input field. The user can click on the stars to rate the product and see the value being updated.

How to use it:

1. Create an empty DIV container to hold the star rating system.

<div id="rating"></div>

2. Download and load the rating.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/rating.js"></script>

3. Initialize the plugin to generate a default star rating system.

rating.create({
  'selector': '#rating'
});

4. It automatically adds the following HTML elements to the page.

<div id="rating">
  <input type="hidden" name="rating" value="3">
  <img src="selectedStar.svg" data-position="1">
  <img src="selectedStar.svg" data-position="2">
  <img src="selectedStar.svg" data-position="3">
  <img src="unselectedStar.svg" data-position="4">
  <img src="unselectedStar.svg" data-position="5">
</div>

5. Override the default rating symbols.

rating.create({
  'selector': '#rating',
  // use Font Awesome Icons
  'unselectedIcon': 'fa fa-star-o red-font',
  'selectedIcon': 'fa fa-star',
});

6. Set the maximum number of stars. Default: 5.

rating.create({
  'selector': '#rating',
  'outOf': 10,
});

7. Set the initial rating value. Default: 3.

rating.create({
  'selector': '#rating',
  'defaultRating': 4,
});

8. Set the name of the hidden input. Default: 'rating'.

rating.create({
  'selector': '#rating',
  'name': 'my-name',
});

9. Add extra CSS classes to the stars. Default: null.

rating.create({
  'selector': '#rating',
  'ratingClass': 'class-1 class-2',
});

---

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