Learn MVC Client Learn ASP.NET MVC Edition Client

Adding/Removing

Vertical Alignment

Collection View

Loading JSON Dates

Infinite Scrolling

Hierarchical Data

Editable Tree Grids

Unbound Tree Grids

Read-only, Required Columns

Conditional Styling

Dynamic Updates

Multiple Chart Types

Special Chart Types

Candlestick Charts

HighLowOpenClose Charts

Zooming with the Wheel

Grouping and Drill-down

Grouping and Drill-down

Interactive Charts

Filtering and Zooming

Grouping and Drill-down

Basic Properties

Result
Source
Document

Gauges (Sliders)

In addition to the InputNumber control, you can use gauges to display and edit numbers.

Although they are normally used in dashboard-style applications to display numeric data, C1 MVC gauges have an isReadOnly property that allows you to use them as input controls, much like the HTML input range element.

Gauge controls are similar to HTML input range elements, but with some advantages:

Gauges have a consistent look among browsers. Input range elements look different depending on the browser.
Gauges can be styled using CSS, and customized with a rich set of properties.

GaugesController.cs
Gauges.cshtml

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

<h1>
    @Html.Raw(Resources.C1Input.Gauges_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.Gauges_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.Gauges_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Input.Gauges_Text3)
</p>
<ol>
    <li>
        @Html.Raw(Resources.C1Input.Gauges_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.Gauges_Text5)
    </li>
</ol>