// This file locates: "Content/css/Lesson/C1Input/FocusedState.css".
.center {
  text-align: center;
  max-width: 3in;
  margin: 12px auto;
}
.wj-gauge {
  margin-bottom: 16px;
}
.wj-radialgauge {
  height: 120px;
}
.wj-gauge .wj-face path {
    fill: #e0e0e0;
    stroke: none;
}
.wj-gauge .wj-pointer {
    fill: #404040;
    stroke: none;
}
.wj-lineargauge.wj-state-focused .wj-thumb {
    stroke: orange;
    fill: orange;
    stroke-width: 12px;
    transition: ease-in stroke-width .4s;
}
.wj-radialgauge.wj-state-focused .wj-thumb {
    stroke: orange;
    fill: orange;
    stroke-width: 6px;
    transition: ease-in stroke-width .4s;
}

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

<h1>
    @Html.Raw(Resources.C1Input.FocusedState_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.FocusedState_Text1)
</p>
 
@(Html.C1().LinearGauge().Id("theLinearGauge")
    .CssClass("center")
    .Min(0).Max(255).Step(20).Value(100)
    .IsReadOnly(false)
    .HasShadow(false)
    .ThumbSize(12)
    .Face(f=>f.Thickness(0.25))
    .Pointer(p=>p.Thickness(0.25))
)
@(Html.C1().RadialGauge().Id("theRadialGauge")
    .CssClass("center")
    .Min(0).Max(255).Step(10).Value(100)
    .ShowText(ShowText.Value)
    .IsReadOnly(false)
    .ThumbSize(7)
    .Face(f=>f.Thickness(0.07))
    .Pointer(p=>p.Thickness(0.07))
)