Rating with Material Design UI

The Rating component provides the end-user with the ability to evaluate items, services and people by rating them. This rating component supports both SVG and Material Icons.

We have used jQuery Raty as base and customized it by applying material design principles to it.

For more options and documentation, visit: jQuery Raty

Rating with SVG

This is the default rating where the stars are in SVG form. Add a div with class .rating to add the star rating.

Rating with Material Icon

You can even use material icons in the rating. Add .pmd-material-rating followed by .rating.

Rating with Readonly State

Add readonly:true option to make the rating action readonly.

Rating with Default Value

To set a by default value for the rating, use data-score attribute.

Rating with Increased Number of Stars

You can increase the number of stars in the rating by adding number option.

Rating with Hints

Add hints to the stars using hintList option.

Rating on Click

Use onClick function to save the rating on click.

Rating with Cancel Button

Add cancel button using cancel:true option.

Rating with Cancel Button on Right

Move cancel button to the right by using cancelPlace:right option.

Rating with Different Icons

You can even use different icons in place of stars for the rating

Rating with No Space

You can even remove the space between the stars using space:false option.

Rating with Single Star Selection

Add single:true to highlight only star on selection.

Rating with Half Star Selection

You can also add the ability to select half star by using half:true option.