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.

Compatibility

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

npm i star-rating.js

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

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

stars.rebuild();

stars.destroy();

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

Options

classNames.active

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

classNames.base

Type: String

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

classNames.selected

Type: String

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

clearable

Type: Boolean

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

maxStars:

Type: Integer

The maximum number of stars allowed in a star rating.

prebuilt:

Type: Boolean

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

stars:

Type: Function

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

tooltip:

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.