<h1>
    RadialGauge as NumberInput
</h1>

<p>
    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.
</p>

<p>
    Here is an input range element that can be used
    to enter values between zero and 255:
</p>
<input id="theInputRange"
       class="center"
       type="range"
       min="0"
       max="255"
       step="10">
<h3 id="theValue" class="center"></h3>

<p>
    Here is a RadialGauge control set for the same range.
    The <b>isReadOnly</b> property is set to false, so you
    can change the gauge value using the mouse or keyboard:
</p>
@(Html.C1().RadialGauge().Id("theRadialGauge")
    .CssClass("center")
    .Min(0).Max(255).Step(10)
    .ShowText(ShowText.Value)
)

<p>
    And here is another RadialGauge control with some styling
    applied:
</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))
)