RadialGauge as NumberInput

In addition to the InputNumber control, you can use the RadialGauge to input numbers. The RadialGauge control is similar in features and behavior to the LinearGauge, but with a circular layout.

Here is an input range element that can be used to enter values between zero and 255:

50

Here is a RadialGauge control set for the same range. The isReadOnly property is set to false, so you can change the gauge value using the mouse or keyboard:

And here is another RadialGauge control with some styling applied:

// This file locates: "Scripts/Lesson/C1Input/RadialGauge.js".
c1.documentReady(function () {
    // update radial gauge when value changes
    var theInputRange = document.getElementById('theInputRange');
    theInputRange.addEventListener('input', function (e) {
        setValue(e.target.value * 1);
    });
 
    // RadialGauge with default settings
    var theRadialGauge = wijmo.Control.getControl('#theRadialGauge');
    theRadialGauge.isReadOnly = false;
    theRadialGauge.valueChanged.addHandler(function (s, e) {
        setValue(s.value);
    });
 
    // RadialGauge with some styling
    var theRadialGaugeCSS = wijmo.Control.getControl('#theRadialGaugeCSS');
    theRadialGaugeCSS.valueChanged.addHandler(function (s, e) {
        setValue(s.value);
    });
 
    // update all controls when the value changes
    var theValue = document.getElementById('theValue');
    setValue(50);
    function setValue(value) {
        theValue.textContent = value;
        theInputRange.value = value;
        theRadialGauge.value = value;
        theRadialGaugeCSS.value = value;
    }
});

// This file locates: "Content/css/Lesson/C1Input/RadialGauge.css".
.center {
  text-align: center;
  max-width: 3in;
  margin: 12px auto;
}
 
.custom-gauge.wj-gauge {
  height: 100px;
}
.custom-gauge.wj-gauge .wj-face path {
    fill: #d0d0d0;
    stroke: none;
}
.custom-gauge.wj-gauge .wj-pointer path {
    fill: #404040;
    stroke: none;
}
.custom-gauge.wj-gauge circle.wj-pointer {
    fill: #404040;
    stroke: none;
}
.custom-gauge.wj-gauge.wj-state-focused circle.wj-pointer {
    stroke: orange;
    stroke-width: 4px;
}

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

<h1>
    @Html.Raw(Resources.C1Input.RadialGauge_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.RadialGauge_Text1)
</p>
 
<p>
    @Html.Raw(Resources.C1Input.RadialGauge_Text2)
</p>
<input id="theInputRange"
       class="center"
       type="range"
       min="0"
       max="255"
       step="10">
<h3 id="theValue" class="center"></h3>
 
<p>
    @Html.Raw(Resources.C1Input.RadialGauge_Text3)
</p>
@(Html.C1().RadialGauge().Id("theRadialGauge")
    .CssClass("center")
    .Min(0).Max(255).Step(10)
    .ShowText(ShowText.Value)
)
 
<p>
    @Html.Raw(Resources.C1Input.RadialGauge_Text4)
</p>
@(Html.C1().RadialGauge().Id("theRadialGaugeCSS")
    .CssClass("center custom-gauge")
    .Min(0).Max(255).Step(10)
    .ShowText(ShowText.Value)
    .IsReadOnly(false)
    .StartAngle(-90).SweepAngle(180)
    .ThumbSize(8)
    .Face(f=>f.Thickness(0.15))
    .Pointer(p=>p.Thickness(0.15).Color(System.Drawing.Color.Red))
)