jQuery Bar Rating

Minimal, light-weight jQuery ratings.

jQuery Bar Rating Plugin works by transforming a standard select field into a rating widget. The rating widget can be flexibly styled with CSS. Take a look at a few examples.

enable disable
1/10 Rating
Movie Rating
Square Rating
Pill Rating
Reversed Rating
Horizontal Rating

How about star ratings?

The plugin comes with a few flavours of star ratings compatible with popular libraries.

Font Awesome
CSS Stars
Bootstrap
How to use
  1. Get the plugin from GitHub or install with Bower:

    
    bower install jquery-bar-rating
    
    
  2. Create a select field:

    
    <select id="example">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    
    
  3. If you would like to use one of the provided themes include the theme in the head section of the page.

    
    <link rel="stylesheet" href="fontawesome-stars.css">
    
    
  4. Include and call the plugin (after jQuery v1.7.2+)

    
    <script src="jquery.barrating.min.js"></script>
    <script type="text/javascript">
       $(function() {
          $('#example').barrating({
            theme: 'fontawesome-stars'
          });
       });
    </script>
    
    
  5. The select field will be wrapped in a div with a `.br-theme-fontawesome-stars` class. For a full list of available options please refer to configuration.

    Expected result:

    
    <div class="br-wrapper br-theme-fontawesome-stars">
      <select id="example">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
      ...rating widget...
    </div>
    
    
Made by ANTENNA.IO