Allow users to easily view and set ratings that reflect degrees of satisfaction with content and services.


Allow users to easily view and set ratings that reflect degrees of satisfaction with content and services. The rating control has several great features that provide flexibility and customization. To create rating, add role rating with attribute data-role to input element.

                    <input data-role="rating">


The rating component has a number of options to setup it.

Stars count

By default the rating is displayed with five stars. You can set your own number of stars with attribute data-stars="...". Value for this attribute must be a valid integer value.

                    <input data-role="rating" data-stars="10">

Value, values and round values

You can set rated value with attribute data-value="...". Value for this attribute must be a valid number value and less or equal of count of stars.

                    <input data-role="rating" data-value="3">

If your value is a float, you can use special attribute data-round-func="round|ceil|floor" to set round function. By default, used round function.




                    <input data-role="rating" data-value="3.7" data-round-func="round">
                    <input data-role="rating" data-value="3.7" data-round-func="ceil">
                    <input data-role="rating" data-value="3.7" data-round-func="floor">

Each star has associated value, to determine the ranking. By default, this number is from 1 to the number of stars. You can set own set of values with attribute data-values="...". Use comma separated string to set value for this attribute.

Click on star to view associated value.

                    <input data-role="rating" data-values="0.1, 0.2, 0.3, 0.4, 0.5">
                    <input data-role="rating" data-values="A, B, C, D, E">


With attribute data-message="..." you can set additional information field for rating.

                    <input data-role="rating" data-value="3" data-message="(3856)">


You can set own colors for rating with attributes data-star-color="..." and data-stared-color="...". Value for this attribute must be valid color hex value or Metro 4 color name. A color names a defined in Metro.utils, you can see all names in example below.

                    <input data-role="rating"

                        colors: {
                            lime: '#a4c400',
                            green: '#60a917',
                            emerald: '#008a00',
                            blue: '#00AFF0',
                            teal: '#00aba9',
                            cyan: '#1ba1e2',
                            cobalt: '#0050ef',
                            indigo: '#6a00ff',
                            violet: '#aa00ff',
                            pink: '#dc4fad',
                            magenta: '#d80073',
                            crimson: '#a20025',
                            red: '#CE352C',
                            orange: '#fa6800',
                            amber: '#f0a30a',
                            yellow: '#fff000',
                            brown: '#825a2c',
                            olive: '#6d8764',
                            steel: '#647687',
                            mauve: '#76608a',
                            taupe: '#87794e'

Static rating

If you need create static rating, use attribute data-static="true" to set it.

                    <input data-role="rating"


When rating works, it generate the number of events. You can use callbacks for this events to interact with it.

Event Data Desc
onStarClick(value, star, element) data-on-star-click Fired when use click on the star on the not static rating
onRatingCreate(element) data-on-rating-create Fired when the rating was created.

                    <input id="rating-events"
                            alert('User rated this with value ' + arguments[0])


Rating has the number of methods to interact with it.

Method Desc
val() Get current rating value
val(val) Set rating value
msg(m) Set rating info message
static(mode) Set rating mode: static when true or not when false

                    <input data-role="rating" id="rating-methods" data-message="Please rate">
                        <button class="button" onclick="
                            var v = Metro.utils.random(1, 5);
                            var r = $('#rating-methods').data('rating');
                            r.val(v).msg('Your rate is: ' + v);
                        ">Click me for rate</button>


You can customize cube component. For change cube visual style use attributes: data-cls-rating - additional class for rating component, data-cls-stars - additional class for stars list, data-cls-result - additional class for message field. Use these attributes to set additional classes to cube elements.