Thumb Element

The thumb is a circle shown at the end of the 'pointer' range. Use the 'thumbSize' property to set the size of the thumb element.

Linear gauges use the thumb to show the current value as text. In these cases, the minimum size of the thumb is determined by the size of the text element it contains.

By default, the thumb color is determined by the "pointer" color, but you can override that using CSS.

Color
Thumb Size

// This file locates: "Scripts/Lesson/C1Gauge/ElementsThumb.js".
c1.documentReady(function () {
    var theGauge = wijmo.Control.getControl('#theGauge');
    var theColor = wijmo.Control.getControl('#theColor');
    var theThumbSize = wijmo.Control.getControl('#theThumbSize ');
 
    theColor.value = theGauge.pointer.color;
    theColor.valueChanged.addHandler(function (s, e) {
        theGauge.pointer.color = s.value;
    });
 
    theThumbSize.value = theGauge.thumbSize;
    theThumbSize.valueChanged.addHandler(function (s, e) {
        theGauge.thumbSize = s.value;
    });
});

// This file locates: "Content/css/Lesson/C1Gauge/ElementsThumb.css".
.wj-gauge {
  height: 150px;
  margin: 20px auto;
  padding: 12px;
  background: rgba(0, 0, 0, .02);
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);  
}
label {
  width: 120px;
  text-align: right;
}
.wj-dropdown,
.wj-inputnumber {
  width: 120px;
  margin-bottom: 6px;
}

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

<h1>
    @Html.Raw(Resources.C1Gauge.ElementsThumb_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Gauge.ElementsThumb_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Gauge.ElementsThumb_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Gauge.ElementsThumb_Text3)
</p>
<div class="row demo-settings">
    <div class="col-xs-6">
        <label for="theColor">@Html.Raw(Resources.C1Gauge.ElementsThumb_Text4)</label>
        @Html.C1().InputColor().Id("theColor")
        <br />
        <label for="theThumbSize">@Html.Raw(Resources.C1Gauge.ElementsThumb_Text5)</label>
        @Html.C1().InputNumber().Id("theThumbSize").Min(0).Max(50).Step(5).Format("n0")
    </div>
    <div class="col-xs-6">
        @(Html.C1().RadialGauge().Id("theGauge")
            .StartAngle(-30).SweepAngle(240)
            .Value(50).Max(100)
            .IsReadOnly(false)
            .HasShadow(false)
            .ShowText(ShowText.All)
            .Pointer(p=>p.Thickness(0.15))
            .ThumbSize(20)
        )
    </div>
</div>