Meter

The <meter> HTML element can be used to build a meter, however it is very difficult to style cross browser. Meter helps achieve accessible meters that can be styled as needed.

Installation

npx @sly-cli/sly add jolly-ui meter

Reusable Wrapper - Example

If you will use a Meter in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.

The installed file includes a reusable wrapper JollyMeter. This wrapper serves as an excellent starting point for use throughout your codebase.

The JollyMeter component extends the props of React Aria Meter and adds:

You can copy this wrapper and create variations as needed for different use cases in your application. This approach promotes consistency while still allowing for flexibility in implementation.

Examples

Basic

Labeling

Value Formatting

Custom value label