Simple Customizable Star Rating System - jQuery fxss-rate

Simple Customizable Star Rating System - jQuery fxss-rate

fxss-rate is a small yet fully customizable jQuery rating system that enables your visitor to rate your article/product/post with SVG based stars. Supports half star and fractional rating.

1. Insert jQuery JavaScript library and the jQuery fxss-rate plugin's files into the HTML file.

<link rel="stylesheet" href="fxss-rate.css">
<script src="" 
<script src="fxss-rate.js"></script>

2. Load the fxss-rate-iconfont.js for the rating stars.

<script src="fxss-rate.js"></script>

3. Create a container element for the rating system.

<div id="rateBox"></div>

4. Call the function rate on the container element to generate a basic rating system.

  // options here

5. Get the current rating value with the callback function:

  callback: function(object){

6. The full customization options that you can override as per your requirement.

  // the number of stars
  length: 5,
  // initial value
  value: 3.5,
  // allows half star
  half: true,
  // supports decimal?
  decimal: true,
  // is readonly?
  readonly: true,
  // shows rating text
  text: true,
  // an array of rating text
  textList: ['Bad', 'Poor', 'Medium', 'Good', 'Perfect'],
  // color
  theme: '#FFB800',
  // text/star size
  size: '20px',
  // space between stars
  gutter: '3px',
  // default CSS classes
  selectClass: 'fxss_rate_select',
  incompleteClass: '', 
  customClass: ''

This awesome jQuery plugin is developed by fxss5201. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 10.10.2018
  • Source