Add Multiple Labels in a Blazor ProgressBar
Environment
| Product | ProgressBar for Blazor |
Description
I want to display two labels on my ProgressBar component: one on the left side to show the current progress and another on the right side for the remaining value.
This KB article also answers the following questions:
- How can I customize the label inside a ProgressBar in Blazor?
- Is it possible to display two or more labels in a ProgressBar?
- How do I use the label template feature in the ProgressBar for Blazor?
Solution
To display two or more labels in a ProgressBar for Blazor, use the Label Template:
1. Declare the Template inside the ProgressBarLabel label tag.
1. Add your desired labels in separate HTML containers.
1. Use CSS to position them based on your preferences.
The code snippet below creates a ProgressBar with a custom label that includes two spans: one for the current value and another for the remaining value. The labels are positioned on the left and right sides of the ProgressBar, respectively, using CSS Flexbox for layout.
<TelerikProgressBar Value="@PBValue"
Max="@MaxValue"
Class="two-labels-progressbar">
<ProgressBarLabel Visible="true" Position="@ProgressBarLabelPosition.Center">
<Template>
<div class="label-container">
<span>Current value: @(context.Value)%</span>
<span>Remaining: @(MaxValue - context.Value)%</span>
</div>
</Template>
</ProgressBarLabel>
</TelerikProgressBar>
<style>
.two-labels-progressbar {
width: 700px;
}
.two-labels-progressbar .label-container {
width: 680px;
display: flex;
justify-content: space-between;
}
</style>
@code {
private double MaxValue { get; set; } = 50;
private double PBValue { get; set; } = 10;
}