ratemate

Ratemate is a jQuery plugin for ratings. It uses Raphaƫl to draw the symbols.

Get the code Heaps good

The rating is read–only when used on a meter element, that's how the above stars have been made:

<meter max="5" min="0" value="5">Heaps good</meter>

$('meter').ratemate({ width: 500, height: 102 });

Using ratemate on an input element whose type is “number” or “range” will cause the rating to be controllable by the user:

<input max="5" min="0" step="1" type="number" value="0">

$('input').ratemate({ width: 500, height: 102 });

Sizing

Your ratemate can be all different sizes:

5.0 out of 5.0 5.0 out of 5.0 5.0 out of 5.0 5.0 out of 5.0 5.0 out of 5.0 5.0 out of 5.0
$('meter').ratemate({ width: someWidth, height: someHeight });

Amounts

You can have heaps of stars, or not so many if you wish. Ratemate will read the element's “max” attribute:

3.0 out of 3.0 3.0 out of 3.0 3.0 out of 3.0 3.0 out of 4.0 3.0 out of 5.0 3.0 out of 6.0 3.0 out of 7.0 3.0 out of 8.0 3.0 out of 9.0 3.0 out of 10.0 3.0 out of 11.0
<meter max="9" min="0" value="7">Sweet</meter>
      
$('meter').ratemate();

Other things

There are more configurable options, such as the colours and SVG string for the symbol. Have a look at the code