CodeBeam.MudBlazor.Extensions icon indicating copy to clipboard operation
CodeBeam.MudBlazor.Extensions copied to clipboard

MudRangeSlider Immediate="false" not updating ValueLabel on slide

Open skyslide22 opened this issue 4 months ago • 0 comments
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;
    }
}

skyslide22 avatar Jul 01 '25 12:07 skyslide22