Raterjs-Ratings

Rater js is the best star rater for the browser. No dependencies. Unlimited number of stars.

Javascript
<!-- rater-js plugin -->
<script src="~/assets/libs/rater-js/index.js"></script>
Initjs (Custom js)
<!-- rating init -->
<script src="~/assets/js/pages/rating.init.js"></script>
Add Package
yarn add rater-js --save
Remove Package
yarn remove rater-js or you can remove package by removing specific package from package.json
Examples
Title Javascript
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
var starRatingStep = raterJs( {
    starSize:22, 
    rating:1.5, 
    element:document.querySelector("#rater-step"), 
    rateCallback:function rateCallback(rating, done) {
        this.setRating(rating); 
        done(); 
    }
});
Custom Messages
var messageDataService =  {
    rate:function(rating) {
            return {then:function (callback) {
                setTimeout(function () {
                    callback((Math.random() * 5)); 
                }, 1000); 
            }
        }
    }
}

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(); 
    }); 
}}); 
Example with unlimited number of stars. readOnly option is set to true
var starRatingunlimited = raterJs( {
    max:16, 
    readOnly:true, 
    rating:4.4, 
    element:document.querySelector("#rater-unlimitedstar")
}); 
On Hover Event
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
var starRatingreset = raterJs( {
    starSize:22,
    rating: 2, 
    element:document.querySelector("#raterreset"), 
    rateCallback:function rateCallback(rating, done) {
        this.setRating(rating); 
        done(); 
    }
}); 
document.querySelector('#raterreset-button').addEventListener("click", function() {
    starRatingreset.clear();
    console.log(starRatingreset.getRating());
}, false); 
© Vixon.
Design & Develop by Themesbrand