Net Promoter Score Rating Plugin With jQuery - ffrating.js

ffrating.js is a JQuery plugin used to generate highly customizable star rating and Net Promoter Score (NPS) rating controls form regular input fields.

1. Add jQuery JavaScript library together with the ffrating.css and ffrating.js to the html page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="scripts/ffrating.js"></script>
<link href="styles/ffrating.css" rel="stylesheet">

2. Create a NPS ratings control and customize the labels with the following data attributes.

<input type="textbox" id="nps" 
       data-flex-minlabel="Disagree"  
       data-flex-middlelabel="Neutral" 
       data-flex-maxlabel="Agree"  
       class="ff-rating">

$('#nps').ffrating({
  isStar:false
});

3. Create a star ratings control and specify the initi value in the value attribute.

<input type="textbox" id="star" value="3" class="ff-rating">

$('#star').ffrating();

4. To customize the rating and NPS rating controls, override the following options and pass theme as an object to the ffrating() function on init.

$('#element').ffrating({
  initialRating: null, // initial rating
  min: 0,
  max: 10,
  steps: 1,
  medium: 5,
  minLabel: "1",
  maxLabel: "10",
  mediumLabel: "5",
  isStar: true, // is star rating?
  showValues: false, // display rating values on the bars?
  showSelectedRating: false, // append a div with a rating to the widget?
  reverse: false, // reverse the rating?
  readonly: false, // make the rating ready-only?
});

5. Callback functions available.

$('#element').ffrating({
  // fired when a rating is selected
  onSelect: function () {
  }, 
  // fired when a rating is cleared
  onClear: function () {
  }, 
  // fired when a widget is destroyed
  onDestroy: function () {
  }
});

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