Press "Enter" to skip to content

Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values.

The ES6 module with zero dependency converts SELECT with numerical range values (i.e. 1-5) into a dynamic star rating element.

5 star rating javascript, star rating jquery, star rating jquery source code, convert number to star rating javascript, half star rating jquery

How to make use of it:

1. Create a chosen field in your star rating system.

<select class="star-rating">
    <option value="">Select a rating</option>
    <option value="5">Excellent</option>
    <option value="4">Very Good</option>
    <option value="3">Average</option>
    <option value="2">Poor</option>
    <option value="1">Terrible</option>
</select>

2. Install & download the star-rating.js.

# Yarn
$ yarn add star-rating.js

# NPM
$ npm install star-rating.js --save

3. Load essential JavaScript and CSS information within the doc.

<link href="dist/star-rating.css" rel="stylesheet" />
<script src="dist/star-rating.min.js"></script>

4. Initialize the library on the chosen field and accomplished it.

var starRatingControl = new StarRating( '.star-rating' );

5. Set the utmost variety of stars allowed to select.

var starRatingControl = new StarRating('.star-rating',{
    maxStars: 5
});

6. Determine whether or not to present the label next to the star rating management.

var starRatingControl = new StarRating('.star-rating',{
    showText: false
});

7. Determine whether or not to clear the rating by clicking on the chosen stars.

var starRatingControl = new StarRating('.star-rating',{
    showText: false
});

8. More configuration choices.

var starRatingControl = new StarRating('.star-rating',{
    classname: "gl-star-rating"
    initialText: "Select a Rating"
});

9. You also can move the choices object to the data options in your chosen component.

<select class="star-rating" data-options='{"clearable":false, "showText":false}'>
  ...
</select>

10. Destroy & re-init the star rating management.

starRatingControl.destroy();
starRatingControl.rebuild();

11. Override the default CSS types within the star-rating.scss.

$star-rating-defaults: (
  base-classname : 'gl-star-rating',
  base-display   : block,
  base-height    : 26px,
  font-size      : 0.8em,
  font-weight    : 600,
  parent         : '',
  star-empty     : url(../img/star-empty.svg),
  star-full      : url(../img/star-full.svg),
  star-half      : url(../img/star-half.svg),
  star-size      : 24px,
  text-background: #1a1a1a,
  text-color     : #fff,
);

Select Box Based Star Rating, star-rating.js Plugin/Github, how to calculate average star rating in javascript


See Demo And Download

Official Website(pryley): Click Here

This superior jQuery/javascript plugin is developed by pryley. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.