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 #

html
javascript

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

html
javascript

                                                    
                                                        <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();
                                                                }
                                                            });

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

html
javascript

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

html
javascript

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

html
javascript

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