LinearGauge as NumberInput

In addition to the InputNumber control, you can use the LinearGauge to input numbers. The LinearGauge is similar to an HTML input range control, but with some improvements:

The LinearGauge has a consistent look among browsers. Input range elements look different depending on the browser.
The LinearGauge can be styled using CSS, and customized with a rich set of properties.

For example, here is an input range element that can be used to enter values between zero and 255:

50

Here is a LinearGauge 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 LinearGauge control with some styling applied:

And here is an equalizer-style group of vertical gauges used to edit several numbers:

// This file locates: "Scripts/Lesson/C1Input/LinearGauge.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);
    });
 
    //LinearGauge with default settings
    var theLinearGauge = wijmo.Control.getControl('#theLinearGauge');
    theLinearGauge.isReadOnly = false;
    theLinearGauge.valueChanged.addHandler(function (s, e) {
        setValue(s.value);
    });
 
    //LinearGauge with some styling
    var theLinearGaugeCSS = wijmo.Control.getControl('#theLinearGaugeCSS');
    theLinearGaugeCSS.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;
        theLinearGauge.value = value;
        theLinearGaugeCSS.value = value;
    }
});

// This file locates: "Content/css/Lesson/C1Input/LinearGauge.css".
.center {
  text-align: center;
  max-width: 3in;
  margin: 12px auto;
}
 
.custom-gauge.wj-gauge .wj-face path {
    fill: #e0e0e0;
    stroke: none;
}
.custom-gauge.wj-gauge .wj-pointer {
    fill: #404040;
    stroke: none;
}
.custom-gauge.wj-gauge.wj-state-focused .wj-thumb {
    stroke: orange;
    stroke-width: 2px;
}
 
.vertical-gauge {
  height: 180px;
  width: 20px;
  display: inline-block;
}
.vertical-gauge text {
  fill: white;
  font-size: 80%;
}

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

<h1>
    @Html.Raw(Resources.C1Input.LinearGauge_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.LinearGauge_Text1)
</p>
<ol>
    <li>
        @Html.Raw(Resources.C1Input.LinearGauge_Text2)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.LinearGauge_Text3)
    </li>
</ol>
 
<p>
    @Html.Raw(Resources.C1Input.LinearGauge_Text4)
</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.LinearGauge_Text5)
</p>
@Html.C1().LinearGauge().Id("theLinearGauge").CssClass("center").Min(0).Max(255).Step(10)
 
<p>
    @Html.Raw(Resources.C1Input.LinearGauge_Text6)
</p>
@(Html.C1().LinearGauge().Id("theLinearGaugeCSS").CssClass("center custom-gauge")
    .Min(0).Max(255).Step(10)
    .IsReadOnly(false).ThumbSize(12).HasShadow(false)
    .Face(f => f.Thickness(0.25))
    .Pointer(p => p.Thickness(0.25).Color(System.Drawing.Color.Red)))
 
<p>
    @Html.Raw(Resources.C1Input.LinearGauge_Text7)
</p>
<div id="gauges" class="center">
    @{
        var rand = new Random(0);
    }
    @for (var i = 0; i < 8; i++)
    {
        @(Html.C1().LinearGauge()
            .CssClass("vertical-gauge custom-gauge")
            .Min(0).Max(10).Value(rand.NextDouble() * 10)
            .IsReadOnly(false).HasShadow(false)
            .ThumbSize(20).ShowTicks(true)
            .Direction(GaugeDirection.Up)
            .ShowText(ShowText.Value)
            .Face(f => f.Thickness(0.1))
            .Pointer(p => p.Thickness(0.25))
        )
    }
</div>