<h1>
    Face Element
</h1>
<p>
    The "face" is a range that represents the gauge background.
    The "min" and "max" properties of the face range correspond
    to the "min" and "max" properties of the gauge control, and
    limit the values that the gauge can display.
</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)
            .Pointer(p=>p.Thickness(0.15))
            .ThumbSize(20)
        )
    </div>
</div>