Rater Js Example

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