<div>
	<h2>Basic Demo</h2>
	<meter class="o-meter" data-o-component="o-meter"></meter>
</div>
<div>
	<h2>Additional Value Indicator Demo</h2>
	<div class="o-meter-container">
		<meter class="o-meter" data-o-component="o-meter" min="0" max="100" value="75">
		75
		</meter>
		<span class="o-meter-value" style="left: 75%">
			75
		</span>
	</div>
</div>
<div>
	<h2>Changing Colors on Meter</h2>
	<meter class="o-meter" style="
		--o-meter-background-color: lightgray;
		--o-meter-optimum-color: deeppink;
		--o-meter-sub-optimum-color: hotpink;
		--o-meter-less-than-sub-optimum-color: pink;" data-o-component="o-meter" min="0" max="100" low="25" high="75" optimum="100" value="{{meterValue}}">
		{{meterValue}}
	</meter>
</div>
<div>
	<h2>Changing Height and Width on Meter</h2>
	<meter class="o-meter" style="--o-meter-width: 300px; --o-meter-height: 30px;" data-o-component="o-meter" min="0" max="100" value="{{meterValue}}">
		{{meterValue}}
	</meter>
</div>
