Responsive Customizable Star Rating System - jQuery hillRate

File Size: 23 KB
Views Total: 2976
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive Customizable Star Rating System - jQuery hillRate

The jQuery hillRate plugin helps developers to implement a responsive, highly customizable star rating system on the web app.

It automatically creates a hidden input to store the selected rating value.

More features:

  • Custom star icon.
  • Supports half-Star rating.
  • Unlimited number of stars.
  • Custom feedback message.
  • Edit and read-only mode.
  • Shows selected rating value.

How to use it:

1. Download and include the JavaScript file hillRate-jquery.js after jQuery.

<script src="" 
<script src="/js/hillRate-jquery.js"></script>

2. Create a container element to hold the star rating system.

<div class="rating-star-demo"></div>

3. Optionally, you can define the pre-selected rating value in the data-value attribute.

<div class="rating-star-demo"

4. Call the function to generate a basic star rating system.


5. Specify the maximum number of rating stars. Default: 3.

  stars: 5

6. Customize the rating symbols.

  imageStar: {"default": 'img/star-empty.png', "full": "img/star-full.png", "half": "img/star-half.png"}

7. Define an array of values for the rating stars. Default: 0, 1, 2.

  valuesStar: [0, 1, 2, 3, 4, 5]

8. Customize the name of the hidden input.

  nameInput: "rating"

9. Enable/disable the responsive design. Default: false.

  responsive: true

10. Determine whether to show the selected value. Default: false.

  showSelectedValue: true

11. Enable/disable the read only mode. Default: true (disabled).

  edit: false

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