NumberStepper - simple working concept

src/Connected.Components.Showcase.Runner/Pages/Index.razor

@@ -42,8 +42,14 @@ CloseOnDateSelect=true
  
 </DatePicker>
 
+<NumberStepper @bind-Value=number></NumberStepper>
+
 <p>Selected date is @date.ToString()</p>
 
+<p>Number is: @number.ToString()</p>
+
 @code {
     DateTime date = DateTime.Today;
+
+    int number = 0;
 }

src/Connected.Components/Components/Grid.razor.cs

@@ -37,5 +37,4 @@ public partial class Grid: ComponentBase
 				.Build();
 		}
 	}
-
 }

src/Connected.Components/Components/NumberStepper.razor

@@ -0,0 +1,17 @@
+@typeparam NumberType
+
+<div class="form-group-alt" style="width:50%">
+    <div class="input-group-content">
+        <div class="input-cta-icon" @onclick="StepDown">
+            <svg viewBox="0 0 24 24" class="color-dark icon-root svg-icon icon-size-md"><!--!--><g><rect fill="none" fill-rule="evenodd" height="24" width="24"></rect><rect fill-rule="evenodd" height="2" width="16" x="4" y="11"></rect></g></svg>
+        </div>
+        <div class="input-area">
+            <form>
+                <input style="text-align:center;width:100%" id="number" type="number" placeholder="0" value="@_value" @onchange="Change">
+                </form>
+        </div>
+        <div class="input-cta-icon" @onclick="StepUp">
+            <svg viewBox="0 0 24 24" class="color-dark icon-root svg-icon icon-size-md"><path d="M0 0h24v24H0z" fill="none"></path><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>
+        </div>
+    </div>
+</div>

src/Connected.Components/Components/NumberStepper.razor.cs

@@ -0,0 +1,98 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+using System.Numerics;
+
+namespace Connected.Components
+{
+	public partial class NumberStepper<NumberType> where NumberType : INumber<NumberType>
+
+	{
+		[Parameter]
+		public string Class { get; set; } = string.Empty;
+
+		/// <summary>
+		/// Increase 'Value' for the 'Step'
+		/// </summary>
+		/// <returns>'Value' increased for the 'Step' parameter</returns>
+		private async Task StepUp()
+		{
+			try
+			{
+				var num = Helper.ConvertToType<double>(Value);
+
+				num += Step;
+
+				Value=Helper.ConvertToType<NumberType>(num);
+
+			}
+			catch
+			{
+				Value = default;
+			}
+
+			await ValueChanged.InvokeAsync(Value);
+		}
+
+		/// <summary>
+		/// Decrease 'Value' for the 'Step'
+		/// </summary>
+		/// <returns>'Value' decreased for the 'Step' parameter</returns>
+		private async Task StepDown()
+		{
+			try
+			{
+				var num = Helper.ConvertToType<double>(Value);
+
+				num -= Step;
+
+				Value = Helper.ConvertToType<NumberType>(num);
+
+			}
+			catch
+			{
+				Value = default;
+			}
+
+			await ValueChanged.InvokeAsync(Value);
+		}
+
+		[Parameter]
+		public NumberType? Value
+		{
+			get
+			{
+				
+					try
+					{
+						return Helper.ConvertToType<NumberType>(_value);
+					}
+					catch
+					{
+						return default;
+					}
+			}
+			set
+			{
+				_value = Helper.ConvertToType<double>(value);
+			}
+		}
+		private double _value { get; set; } = 0;
+
+		/// <summary>
+		/// Value change event
+		/// </summary>
+		[Parameter]
+		public EventCallback<NumberType> ValueChanged { get; set; }
+
+		[Parameter]
+		public double Step { get; set; } = 1;
+ 
+		public async Task Change(ChangeEventArgs args)
+		{
+			if (args.Value is not null)
+				Value = (Helper.ConvertToType<NumberType>(args.Value));
+
+			await ValueChanged.InvokeAsync(Value);
+		}
+	}
+}