🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Rating star-rating

Documentation

hillRate

Easy Rating Plugin

Example

<div class="rating-star" data-value='3'></div>

alt tag

Attributes

  • stars: Number of stars

  • imageStar: Custom Image of stars : - default : path img empty star - half: path img half star - full : path img full star

  • imageStarOnIndex: You can specify custom image for index (start: index=0) - "state_unselected" you can declare state when is not selected (default,half,full), otherwise it's full.

  • valuesStar: 2 values => half star / 1 value => full star

  • showSelectedValue: bool that show value selected or not

  • titleStar: title of each star value - Need to correspond to values structure : if you don't want titles, don't add this option

  • nameInput: attribute name of input

  • responsive: default false

  • showSelectedValue: (default false) Print current valueStar selected.

  • edit: (default true) you can choose if use hillRate as input checkbox or only img.

    $('.rating-star').hillRate({           stars : 6,          imageStar: {"default":'img/star-empty-gold.png',"full":"img/star-full-gold.png","half":"img/star-half-gold.png"} ,         imageStarOnIndex: [{"index":0,"default":'img/star-empty.png',"full":"img/star-full.png","half":"img/star-half.png","state_unselected":"default"}],          valuesStar : [0,[1,2],[3,4],[5,6],[7,8],[9,10]],           titleStar: [["Insufficient"],["Almoust Enough","Enough"],["More than enough","Good"],["More than good","Cool"],["extraordinary","Excellent"],["Incredible","WOW!!!"]],          nameInput: "rating",         responsive: true,         showSelectedValue:true,         edit:true     }); 

Other Info

  1. You can set initial value from Html by adding attribute : data-value='Value'

You May Also Like