Rating - CSS Component ​

...

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Construction ​

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.

z-rating ​

The z-rating parameter is the main parameter used to render the rating component.

You can display the value using the rating-score HTML custom attribute, for the label.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Rating.css" />
Code
html
<label>
  <div z-rating="true">
    <input type="range" min="0" max="5" step="0.5" />
  </div>
</label>