From 2e5e0999000c2f727389fc212d7557101d444f11 Mon Sep 17 00:00:00 2001
From: Luke Latham <1622880+guardrex@users.noreply.github.com>
Date: Fri, 6 Sep 2024 17:04:20 -0400
Subject: [PATCH] Override InputNumber type attribute (#33557)

---
 aspnetcore/blazor/forms/input-components.md   | 10 ++++++
 .../aspnetcore-9/includes/blazor.md           | 34 +++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/aspnetcore/blazor/forms/input-components.md b/aspnetcore/blazor/forms/input-components.md
index 91d8d69a6f..ee5b362a53 100644
--- a/aspnetcore/blazor/forms/input-components.md
+++ b/aspnetcore/blazor/forms/input-components.md
@@ -67,6 +67,16 @@ Input components provide default behavior for validating when a field is changed
 
 Some components include useful parsing logic. For example, <xref:Microsoft.AspNetCore.Components.Forms.InputDate%601> and <xref:Microsoft.AspNetCore.Components.Forms.InputNumber%601> handle unparseable values gracefully by registering unparseable values as validation errors. Types that can accept null values also support nullability of the target field (for example, `int?` for a nullable integer).
 
+:::moniker range=">= aspnetcore-9.0"
+
+The <xref:Microsoft.AspNetCore.Components.Forms.InputNumber%601> component supports the [`type="range"` attribute](https://developer.mozilla.org/docs/Web/HTML/Element/input/range), which creates a range input that supports model binding and form validation, typically rendered as a slider or dial control rather than a text box:
+
+```razor
+<InputNumber @bind-Value="..." max="..." min="..." step="..." type="range" />
+```
+
+:::moniker-end
+
 :::moniker range=">= aspnetcore-5.0"
 
 For more information on the <xref:Microsoft.AspNetCore.Components.Forms.InputFile> component, see <xref:blazor/file-uploads>.
diff --git a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md
index cbfeb3a349..733dbfde84 100644
--- a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md
+++ b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md
@@ -193,3 +193,37 @@ The default `OverscanCount` is 3. The following example increases the `OverscanC
     ...
 </QuickGrid>
 ```
+
+### `InputNumber` component supports the `type="range"` attribute
+
+The <xref:Microsoft.AspNetCore.Components.Forms.InputNumber%601> component now supports the [`type="range"` attribute](https://developer.mozilla.org/docs/Web/HTML/Element/input/range), which creates a range input that supports model binding and form validation, typically rendered as a slider or dial control rather than a text box:
+
+```razor
+<EditForm Model="Model" OnSubmit="Submit" FormName="EngineForm">
+    <div>
+        <label>
+            Nacelle Count (2-6): 
+            <InputNumber @bind-Value="Model!.NacelleCount" max="6" min="2" 
+                step="1" type="range" />
+        </label>
+    </div>
+    <div>
+        <button type="submit">Submit</button>
+    </div>
+</EditForm>
+
+@code {
+    [SupplyParameterFromForm]
+    private EngineSpecifications? Model { get; set; }
+
+    protected override void OnInitialized() => Model ??= new();
+
+    private void Submit() {}
+
+    public class EngineSpecifications
+    {
+        [Required, Range(minimum: 2, maximum: 6)]
+        public int NacelleCount { get; set; }
+    }
+}
+```