<h1>
    Pointer Element
</h1>
<p>
    The "pointer" is a range that indicates the gauge's current
    value. The "max" property of the pointer range corresponds
    to the "value" property of the gauge.
</p>

<div class="row demo-settings">
    <div class="col-xs-6">
        <label for="theColor">Color</label>
        @Html.C1().InputColor().Id("theColor")
        <br />
        <label for="theThickness">Thickness</label>
        @Html.C1().InputNumber().Id("theThickness").Min(0).Max(1).Step(0.1).Format("n2")
    </div>
    <div class="col-xs-6">
        @(Html.C1().RadialGauge().Id("theGauge")
            .StartAngle(-30).SweepAngle(240)
            .Value(50).Max(100)
            .IsReadOnly(false)
            .HasShadow(false)
            .ShowText(ShowText.All)
        )
    </div>
</div>