<h1>
    Ranges
</h1>
<p>
    C1 MVC gauges are composed of <b>Range</b> objects.
    Range objects have "min" and "max" properties the define
    the extent of the range, as well as "thickness" and "color"
    properties that define the appearance of the range.
<p>
    Every gauge has at least two ranges, the "face" and
    the "pointer":
</p>
<ul>
    <li>
        <b>face</b>:
        Represents the gauge background. The "min" and "max" properties
        of the face range correspond to the "min" and "max" properties
        of the gauge, and limit the values that the gauge can display.
    </li>
    <li>
        <b>pointer</b>:
        Indicates the gauge's current value. The "max" property of
        the pointer range corresponds to the "value" property of
        the gauge.
    </li>
</ul>
<p>
    In addition to these two special ranges, gauges may have any number
    of additional ranges added to their "ranges" collection. These
    additional ranges can be used in two ways:
</p>
<p>
    By default, extra ranges appear as part of the gauge background.
    This way you can show 'zones' within the gauge, like 'good',
    'average', and 'bad' for example.
    If you set the gauge's "showRanges" property to false, the
    additional ranges are not shown. Instead, they are used to
    automatically set the color of the "pointer" based on the
    current gauge value:
</p>
<div class="demo-settings">
    <label>showRanges</label>
    <input id="showRanges" type="checkbox" checked="checked">
</div>

@(Html.C1().RadialGauge().Id("theRadialGauge")
    .Min(0).Max(100).Value(75).Step(10)
    .IsReadOnly(false)
    .ShowRanges(true)
    .Ranges(r=>
    {
        r.Add().Name("low").Min(0).Max(25).Color(System.Drawing.Color.FromArgb(102, 255, 0, 0));
        r.Add().Name("med").Min(25).Max(50).Color(System.Drawing.Color.FromArgb(102, 255, 255, 0));
        r.Add().Name("high").Min(50).Max(75).Color(System.Drawing.Color.FromArgb(102, 255, 125, 0));
        r.Add().Name("top").Min(75).Max(100).Color(System.Drawing.Color.FromArgb(102, 0, 255, 0));
    })
    .Pointer(p=>p.Thickness(0.2).Color(System.Drawing.Color.Black))
)
@(Html.C1().LinearGauge().Id("theLinearGauge")
    .Min(0).Max(100).Value(75).Step(10)
    .IsReadOnly(false)
    .ShowRanges(true)
    .Ranges(r =>
    {
        r.Add().Name("low").Min(0).Max(25).Color(System.Drawing.Color.FromArgb(102, 255, 0, 0));
        r.Add().Name("med").Min(25).Max(50).Color(System.Drawing.Color.FromArgb(102, 255, 255, 0));
        r.Add().Name("high").Min(50).Max(75).Color(System.Drawing.Color.FromArgb(102, 255, 125, 0));
        r.Add().Name("top").Min(75).Max(100).Color(System.Drawing.Color.FromArgb(102, 0, 255, 0));
    })
    .Pointer(p=>p.Thickness(0.4).Color(System.Drawing.Color.Black))
)