Select Satisfaction And Display Ratings With Range Slider Reviews Plugin

A tiny and customizable jQuery plugin that converts the normal range slider input into a customer satisfaction & product review picker for online stores & Ecommercial websites.

How to use it:

1. Load the necessary JavaScript and CSS files in the HTML file.

<link rel="stylesheet" href="css/range.style.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="src/js/rangeScript.js"></script>

2. The required HTML structure for the review range slider.

<div class="reviews_message example d-flex align-items-center">
  <i class="icon-frown mr-2"></i>
  <div class='range w-100'>
    <span class="reviews-label"></span>
    <div class='reviews-fill'></div>
    <input type="range" class="form-control-range reviews-range" min="0" max="100" step="1" value="50">
  </div>
  <i class="icon-smiley ml-2"></i>
</div>

3. Customize the icons for each range.

var optionRangeSmiley = [
    {min:0,max:0,icon:'icon-sad'},
    {min:25,max:25,icon:'icon-frown'},
    {min:50,max:50,icon:'icon-meh'},
    {min:75,max:75,icon:'icon-smiley'},
    {min:100,max:100,icon:'icon-grinning'},
];

4. Initialize the plugin as a customer satisfaction slider.

var theme = 'satisfied';
$('.example').RangeReviewSmiley(optionRangeSmiley,theme);

5. Initialize the plugin as a product review slider.

var theme = 'review';
$('.example').RangeReviewSmiley(optionRangeSmiley,theme);

---

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