Create Simple Star Rating System Using jQuery RatingStars Plugin

RatingStars a simple but powerful jQuery plugin for rating stars. you can design the entire UI yourself by customizing CSS. Using this plugin you can easily select rating and submit ratings using stars or some other icons you choose.


Libraries

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 
      rel="stylesheet" 
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous">
</script>
<script src="jquery.rating-stars.js"></script>

HTML

Create the rating stars and add simple input box that will display selected rating you can make it hidden and store rating in your database.

<div class="rating-stars block" id="another-rating">
    <input type="hidden" class="rating-value" name="stars-value" id="stars-value" value="2">
    <!-- set the input-value to set the default value -->
    <div class="rating-stars-container">
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
    </div>
</div>



JS

Initialize the rating plugin.

$(function() { 
  $(".rating-stars").ratingStars();
});

List of options you can use to customize the start rating system.

$(function() { 
  $(".rating-stars").ratingStars({
  selectors: {
        starsSelector: '.rating-stars',                 // the main container
        starSelector: '.rating-star',                   // the container for a single star
        starActiveClass: 'is--active',                  // the css-class for the active stars
        starHoverClass: 'is--hover',                    // the css-class for the hover stars
        starNoHoverClass: 'is--no-hover',               // the css class for the other stars (only in the hover effect)
        targetFormElementSelector: '.rating-value'      // the selector for the input
    }
 });
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome jQuery plugin is developed by lk-code. Visit their official github repository for more information and follow for future updates.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.