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

It can be used to display fractional star ratings.

Current rating:
How to use
  1. Get the plugin from GitHub or install with Bower or NPM:

    bower install jquery-bar-rating
    npm 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>
  3. If you would like to use one of the provided themes include the theme in the head section of the page. Adjust the path to the CSS file and make sure it points to the correct theme file. In this example we are also pulling Font Awesome icons from a CDN.

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
    <link rel="stylesheet" href="fontawesome-stars.css">
  4. Include and call the plugin (after jQuery v1.7.2+)

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="jquery.barrating.min.js"></script>
    <script type="text/javascript">
       $(function() {
            theme: 'fontawesome-stars'
  5. You are done.