Gauge Styling

The appearance of the gauge controls is primarily defined in CSS. To customize it, copy the CSS rules from the default theme to a new CSS file and modify them as needed.

Use the gauges to edit the color of the panel:

// This file locates: "Scripts/Lesson/C1Gauge/Styling.js".
c1.documentReady(function () {
    var red = wijmo.Control.getControl('#red');
    var green = wijmo.Control.getControl('#green');
    var blue = wijmo.Control.getControl('#blue');
 
    // color being edited
    var theColor = new wijmo.Color('grey');
    var thePanel = document.getElementById('thePanel');
    updateColor();
    function updateColor() {
        thePanel.style.background = theColor;
    }
 
    red.value = theColor.r;
    red.valueChanged.addHandler(function (s, e) {
        theColor.r = s.value;
        updateColor();
    });
    initGauge(red, 'red');
 
    green.value = theColor.g;
    green.valueChanged.addHandler(function (s, e) {
        theColor.g = s.value;
        updateColor();
    });
    initGauge(green, 'green');
 
    blue.value = theColor.b;
    blue.valueChanged.addHandler(function (s, e) {
        theColor.b = s.value;
        updateColor();
    });
    initGauge(blue, 'blue');
 
    function initGauge(g, color) {
        g.isReadOnly = false,
    g.thumbSize = 10,
    g.hasShadow = false,
    g.min = 0;
        g.max = 255;
        g.step = 5,
        g.showTicks = true;
        g.tickSpacing = 25;
        g.face.thickness = .2;
        g.pointer.thickness = .3;
        g.pointer.color = color;
        g.hostElement.style.color = color;
    }
});

// This file locates: "Content/css/Lesson/C1Gauge/Styling.css".
#thePanel {
  width: 70%;
  margin: 20px auto;
  height: 100px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.wj-gauge {
  width: 70%;
  margin: 20px auto;
}
.wj-gauge .wj-ticks {
  stroke: f0f0f0;
  stroke-width: 2px;
}
.wj-gauge .wj-face path {
  fill: #f0f0f0;
  stroke: #e0e0e0;
}
.wj-gauge.wj-state-focused circle.wj-pointer {
  stroke-width: 8px;
  stroke: currentColor;
}

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

<h1>
    @Html.Raw(Resources.C1Gauge.Styling_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Gauge.Styling_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Gauge.Styling_Text2)
</p>
<div id="thePanel"></div>
@Html.C1().LinearGauge().Id("red")
@Html.C1().LinearGauge().Id("green")
@Html.C1().LinearGauge().Id("blue")