Input tag with type of "range" @bind not working properly. Blazor WebAssembly

[Dwipraj]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

My goal

I have two input tags with the type of "range", first one is for choosing the minimum value, and the second one is for choosing the maximum value. So, the conditions are as follows:

1. The first input's value never exceeds the second input's value.
2. If someone tries to set such a value that overrides the 1st condition, the value will be set to the maximum/minimum allowed value, and the slider will also reflect the same.

Problem

Now, the problem is when I am resetting such a value that overrides the conditions it's not updating the visual input slider properly. I am attaching my code and also a screen recording of the problem. In the attached video the 17th and 22nd second is the expected behavior but the bugs are at the 18th and 24th second's click. I don't want the slider to go roam around in the restricted region also.

bug-reporting-input-binding.mp4

My ultimate goal

Build a razor component that can be used for choosing the lower bound value as well as upper bound value.

Expected Behavior

I have tried the same thing with HTML and Javascript also but no such problem has occurred.

expected-binding-behaviour.mp4

Steps To Reproduce

1. At first, create a Blazor Web-Assembly project.
2. Then create a file named DualSlider.razor component under Pages folder and put the below code in the file.

<div>
    @*Range input*@
    <div>
        <input type="range" id="MinRangeSlider" name="MinRangeSlider" @bind="@_currentMinValue" min="@MinValue" max="@MaxValue" 
            @oninput="@OnMinInput" />
        <input type="range" id="MaxRangeSlider" name="MaxRangeSlider" @bind="@_currentMaxValue" min="@MinValue" max="@MaxValue" 
            @oninput="@OnMaxInput" />
    </div>
    @*Text input*@
    <div>
        <input type="number" id="MinRangeText" name="MinRangeText" value="@_currentMinValue" min="@MinValue" max="@MaxValue" />
        <input type="number" id="MaxRangeText" name="MaxRangeText" value="@_currentMaxValue" min="@MinValue" max="@MaxValue" />
    </div>
</div>

@code {
    public decimal MinValue { get; set; } = 0; 
    public decimal MaxValue { get; set; } = 100;

    private decimal _currentMinValue { get; set; } = default!;
    private decimal _currentMaxValue { get; set; } = default!;

    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        _currentMinValue = MinValue;
        _currentMaxValue = MaxValue;
    }

    public void OnMinInput(Microsoft.AspNetCore.Components.ChangeEventArgs args) 
    {
        if (args.Value != null && Decimal.TryParse(args.Value.ToString(), out decimal newValue))
        {
            if (newValue > _currentMaxValue)
            {
                newValue = _currentMaxValue;
            }
            _currentMinValue = newValue;
            StateHasChanged();
        }
    }

    public void OnMaxInput(Microsoft.AspNetCore.Components.ChangeEventArgs args) 
    {
        if (args.Value != null && Decimal.TryParse(args.Value.ToString(), out decimal newValue))
        {
            if (newValue < _currentMinValue)
            {
                newValue = _currentMinValue;
            }
            _currentMaxValue = newValue;
            StateHasChanged();
        }
    }
}

3. Call the component in Index.razor page as <DualSlider />

Exceptions (if any)

No response

.NET Version

6.0

Anything else?

No response

[Dwipraj]

Hello, is there any update on the issue yet? or anything you need to clarify my problem?

Thank you for contacting us. Due to a lack of activity on this discussion issue we're closing it in an effort to keep our backlog clean. If you believe there is a concern related to the ASP.NET Core framework, which hasn't been addressed yet, please file a new issue.

This issue will be locked after 30 more days of inactivity. If you still wish to discuss this subject after then, please create a new issue!