<h1>
    Styling Ranges
</h1>
<p>
    The color and position of the ranges is primarily defined
    by the value of the 'showRanges' and 'ranges' properties.
</p>
<p>
    In this example, we also used the ':focus' pseudo-class to
    change the opacity of the ranges when the mouse hovers over
    the gauges:
</p>

@(Html.C1().LinearGauge().Id("linear")
    .IsReadOnly(false).HasShadow(false)
    .Value(50).Max(100)
    .ShowRanges(true)
    .Ranges(r=>
    {
        r.Add().Min(0).Max(33).Color(System.Drawing.Color.Red);
        r.Add().Min(33).Max(66).Color(System.Drawing.Color.Yellow);
        r.Add().Min(66).Max(100).Color(System.Drawing.Color.Green);
    })
    .Pointer(p=>p.Thickness(0.5))
)
@(Html.C1().RadialGauge().Id("radial")
    .IsReadOnly(false).HasShadow(false)
    .ShowText(ShowText.Value)
    .Value(50).Max(100)
    .ShowRanges(true)
    .Ranges(r =>
    {
        r.Add().Min(0).Max(33).Color(System.Drawing.Color.Red);
        r.Add().Min(33).Max(66).Color(System.Drawing.Color.Yellow);
        r.Add().Min(66).Max(100).Color(System.Drawing.Color.Green);
    })
    .Pointer(p => p.Thickness(0.5))
)