InputNumber Ranges

Use the InputNumber's min and max properties to restrict the range of values that can be entered.

For example, the InputNumber below only accepts values between one and five:

Note that the control will not validate the range as the value is being edited, but will clamp the value to the valid range when the control loses focus.

For example, you can type "123" in the control above, but as soon as you move the focus to another element the control will apply the constraints and change the value to five, the value of the max property:

1
2
3
4
5
6
// This file locates: "Scripts/Lesson/C1Input/InputNumberRanges.js".
c1.documentReady(function () {
    var theInputNumber = wijmo.Control.getControl('#theInputNumber');
    theInputNumber.min = 1;
    theInputNumber.max = 5;
});
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: InputNumberRanges
        public ActionResult InputNumberRanges()
        {
            return View();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<h1>
    @Html.Raw(Resources.C1Input.InputNumberRanges_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.InputNumberRanges_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.InputNumberRanges_Text2)
</p>
<div class="demo-settings">
    <label for="theInputNumber">@Html.Raw(Resources.C1Input.InputNumberRanges_Text3)</label>
    @Html.C1().InputNumber().Id("theInputNumber").Value(1).Step(1).Format("n0")
</div>
<p>
    @Html.Raw(Resources.C1Input.InputNumberRanges_Text4)
</p>
<p>
    @Html.Raw(Resources.C1Input.InputNumberRanges_Text5)
</p>