ratemate

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

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:

$('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:

<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