@{ 
    var ranges = new[] { 0, 3, 4, 20, 50 };
}

<h1>
    Ranges
</h1>
<p>
    In addition to the "face" and "pointer" ranges, gauges may
    contain additional ranges that show zones within the gauge
    (like 'bad', 'average', and 'good').
</p>
<p>
    Depending on the setting of the 'showRanges' property, these
    additional ranges may be shown at all times or used to determine
    the color of the 'pointer' range based on the current gauge
    value.
</p>

<div class="row demo-settings">
    <div class="col-xs-6">
        <label for="showRanges">Show Ranges</label>
        <input id="showRanges" type="checkbox" checked="checked">
        <br />
        <label for="ranges">Ranges</label>
        @(Html.C1().ComboBox<int>().Id("ranges").Bind(ranges))
    </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)
            .ShowRanges(true)
            .Pointer(p=>p.Thickness(0.25))
            .ThumbSize(20)
        )
    </div>
</div>