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.

How to change CSS style priority

Sometimes the existing stylesheet rules will override the default CSS styles for Star Ratings. To solve this, you can use the postcss-selector-namespace plugin in your PostCSS on the CSS file before merging with your main stylesheet. This namespace value should be a high-priority/privacy property such as an id attribute or similar property.


All modern browsers

If you need to use the Star Rating library in an unsupported browser (such as Internet Explorer), use the Polyfill service.

Must Read: jQuery Star Rating Plugin | score.js

How to make use of it:


npm i star-rating.js

1. SELECT option fields must contain numeric values.

<link href="css/star-rating.css" rel="stylesheet">

<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>

<script src="js/star-rating.min.js"></script>
    var stars = new StarRating('.star-rating');

2. To rebuild all star rating controls (eg after changing form fields with ajax):


3. To completely remove all star rating controls, including all attached event listeners:


4. Below are the default options:

    classNames: {
        active: 'gl-active',
        base: 'gl-star-rating',
        selected: 'gl-selected',
    clearable: true,
    maxStars: 10,
    prebuilt: false,
    stars: null,
    tooltip: 'Select a Rating',


Type: String

The classname to use for the active (hovered or value <= of the selected value) state of a star.

Must Read: Create a Beautiful Star Falling Background with starback.js


Type: String

The classname to use for the base element that wraps the star rating.


Type: String

The classname to use for the selected state of a star.


Type: Boolean

Whether or not the star rating can be cleared by clicking on an already selected star.


Type: Integer

The maximum number of stars allowed in a star rating.


Type: Boolean

If this option is true, only the event listeners will be added and no DOM manipulation will take place. 


Type: Function

This can be used to add an SVG image to each star value instead of using the background images in the CSS.


Type: String|False

The placeholder text for the rating tooltip, or false to disable the tooltip.

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.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…