Rating

{{#markdown}} ```xml
``` {{/markdown}}
{{#markdown}} ```xml
``` {{/markdown}}
Top label
{{#markdown}} ```xml
Top label
``` {{/markdown}}
Top label
{{#markdown}} ```xml
Top label
``` {{/markdown}}
Left label
{{#markdown}} ```xml
Left label
``` {{/markdown}}
Left label
{{#markdown}} ```xml
Left label
``` {{/markdown}}
Top label
{{#markdown}} ```xml
Top label
``` {{/markdown}}
Top label
{{#markdown}} ```xml
Top label
``` {{/markdown}}
Left label
{{#markdown}} ```xml
Left label
``` {{/markdown}}
Left label
{{#markdown}} ```xml
Left label
``` {{/markdown}}
Right label
{{#markdown}} ```xml
Right label
``` {{/markdown}}
Right label
{{#markdown}} ```xml
Right label
``` {{/markdown}}

User rating

{{#markdown}} ```xml
``` {{/markdown}}
{{#markdown}} ```xml
``` {{/markdown}}

Clickable rating

Rate this stuff:
{{#markdown}} ```xml
Rate this stuff:
``` {{/markdown}}
Rate this stuff:
{{#markdown}} ```xml
Rate this stuff:
``` {{/markdown}}

The interaction might be implemented through a MVVM library. This is the jQuery sample of this demo:

{{#markdown}} ```javascript $(function () { // Star rating $('.rating-btn').on('mouseenter', function () { var active = $(this); // Highlight the hovered star and the previous stars $(this).prevAll('.rating-btn').addClass('active'); $(this).addClass('active'); // Remove highlighting of the following stars $(this).nextAll('.rating-btn').removeClass('active'); }); // Remove highlight of all stars when leaving the container $('.rating-stars-input').on('mouseleave', function () { $(this).find('.rating-btn').removeClass('active'); }); }); ``` {{/markdown}}