Select Satisfaction And Display Ratings With Range Slider Reviews Plugin
File Size: | 168 KB |
---|---|
Views Total: | 1750 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.