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.

There are several JavaScript libraries available for implementing star rating systems, each offering unique features. Here are some notable ones:

star-rating.js:

Custom rating symbols.
Custom star size.
Allows specifying the number of stars.
Custom feedback messages.
Stores rating values in a hidden input.

Raty:

Fully configurable star rating component.
Supports fractional ratings.
Customizable star icons and colors.

rater-js:

Simple yet customizable star rating component.
Supports fractional ratings.
Custom min/max/initial rating values.
Readonly mode.

SimpleStarRating.js:

Lightweight and easy to customize.
No dependencies on third-party libraries.
Supports custom rating symbols.

How to make use of it:

Creating a star rating system with JavaScript is a great way to enhance user interaction on your website.

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 or to not present the label next to the star rating management.

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

7. Determine whether or not or to not 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 choose 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