This zero-dependency ES6 module transforms a select with numerical-range values (i.e. 1-5) into a dynamic star rating element.
A zero-dependency library that transforms a select with numerical-range values (i.e. 1-5) into a dynamic star rating element.
For production, use the files from the dist/
folder.
npm i star-rating.js
Your SELECT option fields must have numerical 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>
</select>
<script src="js/star-rating.min.js"></script>
<script>
var stars = new StarRating('.star-rating');
</script>
To rebuild all star rating controls (e.g. after form fields have changed with ajax):
stars.rebuild();
To fully remove all star rating controls, including all attached Event Listeners:
stars.destroy();
Here 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.
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. You will need to ensure that the DOM looks something like this:
<span class="gl-star-rating">
<select>
<option value="">Select a rating</option>
<option value="5">5 Stars</option>
<option value="4">4 Stars</option>
<option value="3">3 Stars</option>
<option value="2">2 Stars</option>
<option value="1">1 Star</option>
</select>
<span class="gl-star-rating--stars">
<span data-value="1"></span>
<span data-value="2"></span>
<span data-value="3"></span>
<span data-value="4"></span>
<span data-value="5"></span>
</span>
</span>
Type: Function
This can be used to add a 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.
npm install
npm run build
The compiled files will be saved in the dist/
folder.
Note: If importing this into your project, you will need to add @babel/plugin-proposal-optional-chaining to your babel config.
Following are the default CSS variable values for Star Rating:
:root {
--gl-star-color: #fdd835; /* if using SVG images */
--gl-star-color-inactive: #dcdce6; /* if using SVG images */
--gl-star-empty: url(../img/star-empty.svg); /* if using background images */
--gl-star-full: url(../img/star-full.svg); /* if using background images */
--gl-star-size: 24px;
--gl-tooltip-border-radius: 4px;
--gl-tooltip-font-size: 0.875rem;
--gl-tooltip-font-weight: 400;
--gl-tooltip-line-height: 1;
--gl-tooltip-margin: 12px;
--gl-tooltip-padding: .5em 1em;
--gl-tooltip-size: 6px;
}
To override any values with your own, simply import the CSS file into your project, then enter new CSS variable values after the import.
@import 'star-rating';
:root {
--gl-star-size: 32px;
}
Sometimes an existing stylesheet rules will override the default CSS styles for Star Ratings. To solve this problem, you can use the postcss-selector-namespace plugin in your PostCSS build on the CSS file before combining with your main stylesheet. This namespace value should be a high priority/specificity property such as an id attribute or similar.
If you need to use the Star Rating library in a unsupported browser (i.e. Internet Explorer), use the Polyfill service.
pointer-events: none;
style to it to prevent the focus event from triggering on touch devices.All changes should be committed to the files in src/
.
v4.3.0 - [2022-08-05]
v4.2.5 - [2022-07-30]
v4.2.3 - [2022-06-03]
v4.2.2 - [2022-03-30]
v4.2.0 - [2022-03-24]
v4.1.5 - [2021-09-25]
v4.1.4 - [2021-05-29]
v4.1.3 - [2021-04-09]
v4.1.2 - [2021-02-24]
v4.1.1 - [2021-02-14]
prebuilt
optionv4.1.0 - [2021-02-13]
prebuilt
optionv4.0.6 - [2021-02-05]
v4.0.5 - [2021-02-03]
v4.0.4 - [2021-02-02]
v4.0.3 - [2021-01-29]
v4.0.2 - [2021-01-23]
'function' !== typeof options.stars
)v4.0.1 - [2021-01-22]
v4.0.0 - [2021-01-22]
stars
option which allows you to use custom SVG images for each starclassname
option with the classNames
optioninitialText
with the tooltip
optionv3.4.0 - [2020-10-18]
v3.2.0 - [2020-07-13]
v3.1.8 - [2020-06-29]
v3.1.5 - [2019-11-01]
v3.1.4 - [2019-01-28]
v3.1.3 - [2019-01-27]
v3.1.2 - [2019-01-07]
v3.1.1 - [2018-07-27]
v3.1.0 - [2018-07-24]
star-filled
SCSS map option to star-full
star-empty
, star-full
, and star-half
SCSS map options to url(...)
. This allows one to use none
as the value of background-image
.v3.0.0 - [2018-07-24]
onClick
option (listen for the change
event instead)v2.3.1 - [2018-07-22]
v2.3.0 - [2018-07-20]
$star-rating[parent]
SCSS optionv2.2.2 - [2018-07-16]
v2.2.1 - [2018-07-13]
v2.2.0 - [2018-07-09]
classname
option$star-rating[base-classname]
SCSS optionv2.1.1 - [2018-05-25]
v2.1.0 - [2018-05-11]
v2.0.0 - [2018-05-02]
v1.3.3 - [2017-04-11]
v1.3.1 - [2016-12-22]
v1.3.0 - [2016-10-10]
clickFn
to onClick
which now passes the select HTMLElement as the argumentv1.2.2 - [2016-10-10]
clearable
option is falsev1.2.1 - [2016-10-09]
v1.2.0 - [2016-10-09]
v1.1.0 - [2016-10-06]
showText
optionv1.0.1 - [2016-10-06]
v1.0.0 - [2016-10-06]