// This file locates: "Content/css/Lesson/C1Gauge/StylingRanges.css".
.wj-gauge {
  width: 50%;
  margin: 20px auto;
}
.wj-gauge .wj-face path {
  fill: #fefefe;
  stroke: #e0e0e0;
}
.wj-radialgauge {
  height: 120px;
}
.wj-gauge .wj-pointer {
  fill: black;
}
.wj-gauge .wj-ranges {
  opacity: .25;
}
.wj-gauge:hover .wj-ranges {
  opacity: 1;
  transition: opacity 600ms;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1GaugeController : Controller
    {
        // GET: StylingRanges
        public ActionResult StylingRanges()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Gauge.StylingRanges_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Gauge.StylingRanges_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Gauge.StylingRanges_Text2)
</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))
)