Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
input type="range" value binding works wrong
See original GitHub issueinput type=“range” value binding works wrong
The following code renders input with actual value=“100” instead of expected value=“180”
<input type="range" value="@(180)" min="20" max="220" />
To Reproduce
Create new Blazor Server project
dotnet new blazorserver
Add the code to any razor page
<input type="range" value="@(180)" min="20" max="220" />
See also the attached project: RangeBug.zip
Further technical details
- ASP.NET Core version: 5.0.7
- dotnet --info
.NET SDK (reflecting any global.json):
Version: 5.0.301
Commit: ef17233f86
Runtime Environment:
OS Name: Windows
OS Version: 10.0.19043
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\5.0.301\
Host (useful for support):
Version: 5.0.7
Commit: 556582d964
.NET SDKs installed:
5.0.201 [C:\Program Files\dotnet\sdk]
5.0.301 [C:\Program Files\dotnet\sdk]
.NET runtimes installed:
Microsoft.AspNetCore.All 2.1.28 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.App 2.1.28 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.16 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 2.1.28 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.16 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 3.1.16 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
- The IDE
Visual Studio Code
Version: 1.57.0 (user setup)
Commit: b4c1bd0a9b03c749ea011b06c6d2676c8091a70c
Date: 2021-06-09T17:18:42.354Z
Electron: 12.0.9
Chrome: 89.0.4389.128
Node.js: 14.16.0
V8: 8.9.255.25-electron.0
OS: Windows_NT x64 10.0.19043
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (5 by maintainers)
Top Results From Across the Web
Svelte using input type=range with bind:value and max
Using Svelte, for input range (slider) changing bind:value AND max both from 10 to 20, slider shows wrong position while values are correct ......
Read more >Value Bubbles for Range Inputs
Range inputs in HTML are like this: <input type="range" name="quantity" min="1" max="10">. In browsers that support them, they look like ...
Read more ><input type="range"> - HTML: HyperText Markup Language
elements of type range let the user specify a numeric value which must be no less than a given value, and no more...
Read more >Form Input | Components
Inputs with type range render using Bootstrap v4's .custom-range class. The track (the background) and thumb (the value) are both styled to appear...
Read more >Slider | Angular Material
<mat-slider> allows for the selection of a value from a range via mouse, touch, or keyboard, similar to <input type="range"> . Basic slider....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
BTW as a workaround for now, try putting your
valueattribute after themin/maxones:This should avoid the issue until we’re able to fix the underlying cause.
Closing because this has been fixed in #33831.