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>