<h1>
    Thumb Element
</h1>
<p>
    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.
</p>
<p>
    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.
</p>
<p>
    By default, the thumb color is determined by the "pointer"
    color, but you can override that using CSS.
</p>
<div class="row demo-settings">
    <div class="col-xs-6">
        <label for="theColor">Color</label>
        @Html.C1().InputColor().Id("theColor")
        <br />
        <label for="theThumbSize">Thumb Size</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>