Activity Stream
Report-Fix / Update

Add 3 files to Tasks

Monday , 4:24 PM
Project Status

Marked Design as Completed

Monday , 3:00 PM
UI
Larkon Application UI v2.0.0 Latest

Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

Monday , 2:10 PM
avatar-5
Alex Smith Attached Photos
Monday 1:00 PM
avatar-5
Rebecca J. added a new team member

Added a new member to Front Dashboard

Monday 10:00 AM
Achievements

Earned a " Best Product Award"

Monday 9:30 AM
View All
Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size
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
                                                            );
                                                          
                                                    
                                                
© Larkon. Crafted by Techzaa