InputNumber

The InputNumber control allows users to enter and edit numbers. It has the following advantages over regular input elements:

Users cannot enter non-numeric values at all.
You can use the format property to format the number as it is edited, making it easy to read.
You can use the min and max properties to specify the valid range of values (users will not be able to enter values outside this range).
You can use the step property to specify an increment that is added to the value when the user clicks the increment/decrement buttons on the control.

For example, here is an InputNumber with default settings:

InputNumber

The current value is 0.

By default, InputNumber values are required, so you can't delete the entire content of the control. If you want to enter a number that is optional, set the isRequired property to false:

Not Required

// This file locates: "Scripts/Lesson/C1Input/InputNumber.js".
c1.documentReady(function () {
    var theNumber = wijmo.Control.getControl('#theNumber');
 
    theNumber.valueChanged.addHandler(function (s, e) {
        document.getElementById('theNumberOutput').textContent = s.value;
    });
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: InputNumber
        public ActionResult InputNumber()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Input.InputNumber_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.InputNumber_Text1)
</p>
<ol>
    <li>
        @Html.Raw(Resources.C1Input.InputNumber_Text2)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.InputNumber_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.InputNumber_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.InputNumber_Text5)
    </li>
</ol>
 
<p>
    @Html.Raw(Resources.C1Input.InputNumber_Text6)
</p>
<label for="theNumber">@Html.Raw(Resources.C1Input.InputNumber_Text7)</label>
@Html.C1().InputNumber().Id("theNumber")
<div>
    @Html.Raw(Resources.C1Input.InputNumber_Text8)
</div>
 
<p></p>
<p>
    @Html.Raw(Resources.C1Input.InputNumber_Text9)
</p>
<label for="theNumberNotRequired">@Html.Raw(Resources.C1Input.InputNumber_Text10)</label>
@Html.C1().InputNumber().Id("theNumberNotRequired").IsRequired(false).Value(null).Min(0).Max(100).Placeholder(Resources.C1Input.InputNumber_Text11)