Rating
...
Browser support
...
Parameters
The CSS component uses a div tag. You can render the component wrapping an input type range tag inside a div with the z-rating HTML custom attribute
INFO
Setting the input as read-only and wrapping the the z-rating container inside a label tag. You can use the rating-score HTML custom attribute for the label to show the current score.
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description |
|---|---|---|
value | number | The current score of the rating. It can be a number between 0 and 5. |
readonly | boolean? | If `true`, the rating will be displayed as a score. |
disabled | boolean? | Blocks the interaction with the input component. |
show-score | boolean? | If `true`, the rating will be displayed with a score. |
The events emitted from the component are:
| Name | Payload | Description |
|---|---|---|
onchange | number | Returns the new value of the "value" attribute |
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Rating.css" />Code
html
<label>
<div z-rating="true">
<input type="range" min="0" max="5" step="0.5" />
</div>
</label>