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',                 
        starSelector: '.rating-star',                   
        starActiveClass: 'is--active',                  
        starHoverClass: 'is--hover',                    
        starNoHoverClass: 'is--no-hover',               
        targetFormElementSelector: '.rating-value'      
    }
 });
});

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.