@{
    var directions = new[] { "Left", "Right", "Up", "Down" };
}

<h1>
    Linear Gauges
</h1>
<p>
    Linear gauges display a metric as a percentage of the length
    of a linear scale.
    They can be horizontal or vertical, depending on the setting
    of the "direction" property.
</p>
<p>
    Use the controls below to see the effect of the main
    LinearGauge properties:
</p>
<div class="row demo-settings">
    <div class="col-xs-6">
        <label for="value">value</label>
        @Html.C1().InputNumber().Id("value")
        <br>
        <label for="direction">direction</label>
        @Html.C1().ComboBox().Id("direction").Bind(directions).Text("Right")
    </div>
    <div class="col-xs-6">
        <div class="gauge-holder">
            @(Html.C1().LinearGauge().Id("theGauge")
                .Min(0).Max(100).Step(5).Value(75)
                .IsReadOnly(false)
                .ShowRanges(false)
                .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);
                })
            )
        </div>
    </div>
</div>