# LinearGauge Quick Start

## Content



The quick start guides you through the steps of adding a LinearGauge control to your MVC web application and set its value. For information on how to add a control, See [Adding controls](/componentone/docs/mvc/online-mvc-core/Adding-Controls).

Follow the steps given below to get started:

![](https://cdn.mescius.io/document-site-files/images/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/images/lineargaugeqs.png)

### Create an MVC Application

Create a new MVC application using the ComponentOne or VisualStudio templates. For more information about creating an MVC application, see [Configuring your MVC Application](/componentone/docs/mvc/online-mvc-core/Configuring-your-MVC-Application) topic.

### Add a new Controller and View

**Add a new Controller**:

1.  In the **Solution Explorer**, right click the folder **Controllers.**
2.  From the context menu, select **Add | Controller**. The **Add Scaffold** dialog appears.
3.  Complete the following steps in the **Add Scaffold** dialog:
    1.  Select **Empty MVC Controller** template.
    2.  Set name of the controller (for example: `Default1Controller`).
    3.  Click **Add**.
4.  A new controller is added to the application.

**Add a View for the controller**:

1.  From the **Solution Explorer**, expand the folder **Controllers** and double click the controller (for example: `Default1Controller`) to open it.
2.  Place the cursor inside the method `Index()`.
3.  Right click and select **Add View**. The **Add View** dialog appears.
4.  In the **Add View** dialog, verify that the View name is **Index** and View engine is **Razor (CSHTML).**
5.  Click **Add**. A view is added for the controller.

### Add the Control

*   From the **Solution Explorer**, expand the folder **Views**.
*   Double click `Index.cshtml` to open it.2.  Replace the default code of the `Index.cshtml` file with the code given below to initialize a **LinearGauge** control and set the following properties:
    
    *   Set the gauge [Value](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.Gauge.Value.html) to **35**. The [Value](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.Gauge.Value.html) property denotes the gauge's current value.
    *   Set the [Min](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.Gauge.Min.html) and [Max](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.Gauge.Max.html) properties to 0 and 100 respectively. The [Min](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.Gauge.Min.html) and [Max](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.Gauge.Max.html) properties specify the range of the gauge. You can add multiple ranges to a single gauge.
    *   Set the Gauge's [isReadOnly](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.Gauge.IsReadOnly.html) property to **False**. The [isReadOnly](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.Gauge.IsReadOnly.html) specifies whether a user can edit the gauge's [Value](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.Gauge.Value.html) using a keyboard or a mouse.
    
    ```html
    <c1-linear-gauge width="500px" height="100px" value="35"
                     thickness="0.1" min="0" max="100" direction="C1.Web.Mvc.GaugeDirection.Right">
        <c1-gauge-range min="0" max="40" color="red"></c1-gauge-range>
        <c1-gauge-range min="40" max=80 color="yellow"></c1-gauge-range>
        <c1-gauge-range min="80" max="100" color="green"></c1-gauge-range>
    </c1-linear-gauge>
    ```
    

### Build and Run the Project

1.  Click **Build | Build Solution** to build the project.
2.  Press **F5** to run the project. 
	> type=note
	> Append the folder name and view name to the generated URL (for example: http://localhost:1234/**Default1/index**) in the address bar of the browser to see the view. Or link the view to the home page.