# Rater Js Example

Back to home page

## Basic 5 star rater

        {
            starSize:32,
            element:document.querySelector("#rater"),
            rateCallback:function rateCallback(rating, done) {
                this.setRating(rating);
                done();
            }
        }

## 5 star rater with step

        {
            element:document.querySelector("#rater"),
            rateCallback:function rateCallback(rating, done) {
                this.setRating(rating);
                done();
            },
            starSize:32,
            step:0.5
        }

## Custom messages

        {
            max:5,
            rating:4,
            element:document.querySelector("#rater2"),
            disableText:"Custom disable text!",
            ratingText:"My custom rating text {rating}",
            showToolTip:true,
            rateCallback:function rateCallback(rating, done) {
                starRating.setRating(rating);
                starRating.disable();
                done();
            }
        }

## You can have unlimited number of stars. Example with 16 stars. readOnly option is set to true.

        {
            max:16,
            readOnly:true,
            rating:4.4,
            element:document.querySelector("#rater3")
        }

## 5 Star rater with custom isBusyText and simulated backend. A random number betweeen 1 and 5 is set as the rating.

        {
            isBusyText: "Rating in progress. Please wait...",
            element:document.querySelector("#rater4"),
            rateCallback: function rateCallback(rating, done) {
            starRating.setRating(rating);
                myDataService.rate().then(function (avgRating) {
                    starRating.setRating(avgRating);
                    done();
                });
            }
        }

## On hover event

        {
            element:document.querySelector("#rater5"),
            rateCallback:function rateCallback(rating, done) {
                this.setRating(rating);
                done();
            },
            onHover: function(currentIndex, currentRating){
    			document.querySelector('.live-rating').textContent = currentIndex;
            },
            onLeave: function(currentIndex, currentRating){
                document.querySelector('.live-rating').textContent = currentRating;
            }
        }

## Clear/reset rater

        {
            element:document.querySelector("#rater6"),
            rateCallback:function rateCallback(rating, done) {
                this.setRating(rating);
                done();
            }
        }

        document.querySelector('#rater6-button').addEventListener("click", function() {
            starRating6.clear();
        }, false);

## Right to left support

           {
                max:6,
                reverse:true, //this enable rtl
                element:document.querySelector("#rater7"),
                rateCallback:function rateCallback(rating, done) {
                    this.setRating(rating);
                    done();
                }
           )