Native styled Meter tag, using the same attributes as native version.
<label tuiTitle="m">
Credit Score
<div
aria-hidden="true"
class="ticks-labels"
>
<span>300</span>
<span
appearance="floating"
tuiBadge
[style.inset-inline-start.%]="(100 * (666 - 300)) / (850 - 300)"
>
666
</span>
<span>850</span>
</div>
<meter
high="580"
low="300"
max="850"
min="300"
optimum="800"
tuiMeter
value="666"
></meter>
</label>
@import '@taiga-ui/styles/utils.less';
.ticks-labels {
.tui-slider-ticks-labels();
position: relative;
[tuiBadge] {
position: absolute;
inset-block-end: 0.25rem;
font: var(--tui-typography-body-l);
font-weight: bold;
transform: translateX(calc(-50% * var(--tui-inline)));
}
}
<label tuiHeader>
<div tuiTitle>
Resting Heart Rate
<div tuiSubtitle>
The number of times your heart beats per minute when you are completely relaxed, still, and awake
</div>
<meter
high="100"
low="80"
max="100"
min="40"
optimum="60"
tuiMeter
value="60"
></meter>
<div
aria-hidden="true"
class="ticks-labels"
>
<span>40</span>
<span
appearance="floating"
tuiBadge
[style.inset-inline-start.%]="(100 * (60 - 40)) / (100 - 40)"
>
60
</span>
<span>100</span>
</div>
</div>
</label>
@import '@taiga-ui/styles/utils.less';
[tuiMeter] {
margin-block-start: 1rem;
}
.ticks-labels {
.tui-slider-ticks-labels();
position: relative;
[tuiBadge] {
position: absolute;
font: var(--tui-typography-body-l);
font-weight: bold;
transform: translateX(calc(-50% * var(--tui-inline)));
}
}