CodeBeam.MudBlazor.Extensions
CodeBeam.MudBlazor.Extensions copied to clipboard
MudRangeSlider Immediate="false" not updating ValueLabel on slide
trafficstars
As the title says, the value label is not updating when setting Immediate to false, (using ValueLabel="true"). I want the value to be changed when user released the slider, but let him know what the current value is which he currently points at. Maybe the current behavior is intendend?
TryMud:
<MudGrid>
<MudItem xs="12" sm="8">
<MudRangeSlider @bind-Value="@_value" @bind-UpperValue="@_upperValue" Size="Size.Large" Variant="Variant.Filled" ValueLabel="_valueLabel" Range="_range" TickMarks="_tickmarks" Immediate="false"
Min="_min" Max="_max" Step="_step" Display="_display" MinDistance="_minDistance" DisableMin="_disableMin" DisableMax="_disableMax" LabelText="@_labelText" UpperLabelText="@($"{_upperLabelText} {_upperValue}")">@_label</MudRangeSlider>
</MudItem>
<MudItem xs="12" sm="4">
<MudStack>
<MudTextField @bind-Value="_label" Label="Label" Variant="Variant.Outlined" Margin="Margin.Dense" />
<MudTextField @bind-Value="_labelText" Label="Label Text" Variant="Variant.Outlined" Margin="Margin.Dense" />
<MudTextField @bind-Value="_upperLabelText" Label="Upper Label Text" Variant="Variant.Outlined" Margin="Margin.Dense" />
<MudNumericField @bind-Value="_value" Label="Lower Value" Variant="Variant.Outlined" Margin="Margin.Dense" />
<MudNumericField @bind-Value="_upperValue" Label="Upper Value" Variant="Variant.Outlined" Margin="Margin.Dense" />
<MudSwitchM3 @bind-Value="_valueLabel" Label="ValueLabel" Color="Color.Secondary" />
<MudSwitchM3 @bind-Value="_range" Label="Range" Color="Color.Secondary" />
<MudSwitchM3 @bind-Value="_tickmarks" Label="Tickmarks" Color="Color.Secondary" />
<MudSwitchM3 @bind-Value="_disableMin" Label="DisableMin" Color="Color.Secondary" />
<MudSwitchM3 @bind-Value="_disableMax" Label="DisableMax" Color="Color.Secondary" />
<MudSwitchM3 @bind-Value="_display" Label="Display" Color="Color.Secondary" />
<MudNumericField @bind-Value="_min" Label="Min" Variant="Variant.Outlined" Margin="Margin.Dense" />
<MudNumericField @bind-Value="_max" Label="Max" Variant="Variant.Outlined" Margin="Margin.Dense" />
<MudNumericField @bind-Value="_step" Label="Step" Variant="Variant.Outlined" Margin="Margin.Dense" />
<MudNumericField @bind-Value="_minDistance" Label="Min Distance" Variant="Variant.Outlined" Margin="Margin.Dense" />
<MudButton OnClick="ClearValues" Color="Color.Primary" Variant="Variant.Filled" Size="Size.Small">Clear Values</MudButton>
</MudStack>
</MudItem>
</MudGrid>
@code {
private int _value = 25;
private int _upperValue = 75;
string _label = "Range";
bool _valueLabel = true;
bool _display = true;
bool _range = true;
bool _tickmarks = false;
bool _disableMin = false;
bool _disableMax = false;
int _min = 0;
int _max = 100;
int _step = 1;
int _minDistance = 2;
string? _labelText;
string? _upperLabelText;
void ClearValues()
{
_value = 0;
_upperValue = 50;
}
}