Input tag, type "range", has counterintuitive interaction between @bind-value and @oninput in Blazor WebAssembly

[josephvanderharst]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

This issue is similar in nature to #43004, opened 3 years ago by Dwipraj, and closed without any interaction.

My use case is more convoluted, but similar in essense, in that I have a bunch of input sliders whose values are all supposed to statefully affect one another. I have double checked my boundary checking and enforcement multiple times and found them working exactly as expected.

Exactly the same issue that Dwipraj was having, I had. When clicking the slider the first time, above the "expected upper bound", the slider's value would be capped as expected. But when clicking it a second time, the value would exceed the boundary.

When it was not working, I had been running

<input type="range"
  @bind-value="MyValue"
  @oninput="(args) => ProcessChangeInMyValue(args)"
/>

However, I resolved the "value gets set too low/high" issue that Dwipraj was encountering by instead explicitly specifying

<input type="range"
  @bind-value:get="MyValue"
  @bind-value:set="(value) => ProcessChangeInMyValue(args)" @* <= This was missing before *@
  @oninput="(args) => ProcessChangeInMyValue(args)"
/>

The problem here is that there is no warning or error provided that makes it clear to an amateur user (like myself) that specifying only @bind-value and @oninput on the input has the counterintuitive behavior that @bind-value:set is also implicitly defined, and as such sometimes clobbers the intended (by the amateur user) result of @oninput.

Expected Behavior

• 1: Either such a user case should result in a warning or error shown to the programmer,
  OR
• 2: @oninput should be given priority over the implicit @bind-value:set, such that whatever the programmer explicitly specifies is what takes place.

Whichever of these techniques is employed, it should be consistent across input types.

P.S. Concerning suggested solution 1:
When the programmer tries to compile the following,

<input type="range"
  @bind-value="MyValue"
  @onchange="(args) => ProcessChangeInMyValue(args)"
/>

The compiler throws error RZ10008, which goes on to explicitly state "... The attribute 'onchange' is used by the '@bind-value' directive attribute."

This is a good thing - thank you for doing it in that case! - a similar technique ought to be employed for the @bind-value and @oninput combination, if @bind-value is to continue to sometimes overrule the result of @oninput.
This way, scenarios like these can be taught to lesser experienced developers through the platform, lessening that part of learning which is unnecessarily frustrating, and so that future developers do not waste hours of their time trying to debug what can be stated in a sentence from the framework itself.

Steps To Reproduce

Repro repo here. Just download, run in Visual Studio, and run, and the showcase will appear.
https://github.com/josephvanderharst/value-and-oninput-issue-repro

Exceptions (if any)

No response

.NET Version

9.0.306

Anything else?

Visual Studio 2022, Community edition. Version 17.14.36623.8

`dotnet --info` output:

.NET SDK: Version: 9.0.306 Commit: cc9947ca66 Workload version: 9.0.300-manifests.abe91478 MSBuild version: 17.14.28+09c1be848

Runtime Environment:
OS Name: Windows
OS Version: 10.0.26200
OS Platform: Windows
RID: win-x64
Base Path: C:\Program Files\dotnet\sdk\9.0.306\

.NET workloads installed:
There are no installed workloads to display.
Configured to use loose manifests when installing new manifests.

Host:
Version: 9.0.10
Architecture: x64
Commit: e1f19886fe

.NET SDKs installed:
2.1.201 [C:\Program Files\dotnet\sdk]
2.1.202 [C:\Program Files\dotnet\sdk]
2.1.526 [C:\Program Files\dotnet\sdk]
3.1.426 [C:\Program Files\dotnet\sdk]
5.0.404 [C:\Program Files\dotnet\sdk]
5.0.408 [C:\Program Files\dotnet\sdk]
5.0.416 [C:\Program Files\dotnet\sdk]
8.0.406 [C:\Program Files\dotnet\sdk]
8.0.413 [C:\Program Files\dotnet\sdk]
9.0.306 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
Microsoft.AspNetCore.All 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.App 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.32 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 8.0.19 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 8.0.21 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 9.0.10 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 2.0.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.0.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.32 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.13 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 8.0.19 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 8.0.21 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 9.0.10 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 3.1.32 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.13 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 8.0.19 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 8.0.21 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 9.0.10 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

Other architectures found:
x86 [C:\Program Files (x86)\dotnet]
registered at [HKLM\SOFTWARE\dotnet\Setup\InstalledVersions\x86\InstallLocation]

Environment variables:
Not set

global.json file:
Not found