Overview Official Website
Rater js is the best star rater for the browser. No dependencies. Unlimited number of stars
Usage
Rater js's CSS and Javascript files are bundled in the vender.min.css and vendor.js and globally included in all pages.
Basic Rater Example #
<div id="basic-rater" dir="ltr"></div>
// basic-rater
if (document.querySelector('#basic-rater'))
var basicRating = raterJs({
starSize: 22,
rating: 3,
element: document.querySelector("#basic-rater"),
rateCallback: function rateCallback(rating, done) {
this.setRating(rating);
done();
}
});
Rater with Step Example #
<div id="rater-step" dir="ltr"></div>
// rater-step
if (document.querySelector('#rater-step'))
var starRatingStep = raterJs({
starSize: 22,
rating: 1.5,
element: document.querySelector("#rater-step"),
rateCallback: function rateCallback(rating, done) {
this.setRating(rating);
done();
}
});
Custom Messages Example #
<div id="rater-message" dir="ltr"></div>
// rater-message
var messageDataService = {
rate: function (rating) {
return {
then: function (callback) {
setTimeout(function () {
callback((Math.random() * 5));
}, 1000);
}
}
}
}
if (document.querySelector('#rater-message'))
var starRatingmessage = raterJs({
isBusyText: "Rating in progress. Please wait...",
starSize: 22,
element: document.querySelector("#rater-message"),
rateCallback: function rateCallback(rating, done) {
starRatingmessage.setRating(rating);
messageDataService.rate().then(function (avgRating) {
starRatingmessage.setRating(avgRating);
done();
});
}
});
ReadOnly Example #
<div id="rater-unlimitedstar" dir="ltr"></div>
// rater-unlimitedstar
if (document.querySelector("#rater-unlimitedstar"))
var starRatingunlimited = raterJs({
starSize: 22,
max: 5,
readOnly: true,
rating: 3.5,
element: document.querySelector("#rater-unlimitedstar"),
});
On Hover Event Example #
<div dir="ltr">
<div id="rater-onhover" class="align-middle"></div>
<span class="ratingnum badge bg-info align-middle ms-2"></span>
</div>
// rater-onhover
if (document.querySelector('#rater-onhover'))
var starRatinghover = raterJs({
starSize: 22,
rating: 1,
element: document.querySelector("#rater-onhover"),
rateCallback: function rateCallback(rating, done) {
this.setRating(rating);
done();
},
onHover: function (currentIndex, currentRating) {
document.querySelector('.ratingnum').textContent = currentIndex;
},
onLeave: function (currentIndex, currentRating) {
document.querySelector('.ratingnum').textContent = currentRating;
}
});
Clear/Reset Rater Example #
<div dir="ltr">
<div id="raterreset" class="align-middle"></div>
<span class="clear-rating"></span>
<button id="raterreset-button" class="btn btn-light btn-sm ms-2">Reset</button>
</div>
// rater-reset
if (document.querySelector('#raterreset'))
var starRatingreset = raterJs({
starSize: 22,
rating: 2,
element: document.querySelector("#raterreset"),
rateCallback: function rateCallback(rating, done) {
this.setRating(rating);
done();
}
});
if (document.querySelector("#raterreset-button"))
document.querySelector("#raterreset-button").addEventListener(
"click",
function () {
starRatingreset.clear();
},
false
);