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="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<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"
     data-value="4">
</div>

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

$('.rating-star-demo').hillRate();

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

$('.rating-star-demo').hillRate({
  stars: 5
});

6. Customize the rating symbols.

$('.rating-star-demo').hillRate({
  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.

$('.rating-star-demo').hillRate({
  valuesStar: [0, 1, 2, 3, 4, 5]
});

8. Customize the name of the hidden input.

$('.rating-star-demo').hillRate({
  nameInput: "rating"
});

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

$('.rating-star-demo').hillRate({
  responsive: true
});

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

$('.rating-star-demo').hillRate({
  showSelectedValue: true
});

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

$('.rating-star-demo').hillRate({
  edit: false
});

---

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