In this example you create an interactive linear gauge. You'll add the C1LinearGaugeExtender and a slider to the page. At run time when the value of the slider changes, so will the value of the gauge.

Complete the following steps:

1. Create a new ASP.NET Web application.
2. In the Solution Explorer, right-click the project and choose Add Reference. Locate and add a reference to the C1.Web.Wijmo.Extenders assembly.
3. Switch to Source view, and add the following markup at the top of the page to register the assembly:

     <%@ Register Assembly="C1.Web.Wijmo.Extenders.4" Namespace="C1.Web.Wijmo.Extenders.C1Gauge" TagPrefix="Gauge" %>

4. Note that you may need to edit the above depending on the assembly you are using.
5. Add the following markup within the main <div> tag to add a Panel with content and set the linear gauge extender:

<asp:Panel ID="linearGauge" runat="server" CssClass="ui-widget ui-widget-content ui-corner-all"></asp:Panel>

<Gauge:C1LinearGaugeExtender runat="server" ID="LinearGaugeExtender1" Height="100" Width="400" TargetControlID="linearGauge" Value="50">

    <Animation Duration="400" />

    <Labels>

        <LabelStyle FontSize="12pt" FontWeight="800">

            <Fill Color="#1E395B"></Fill>

        </LabelStyle>

    </Labels>

    <TickMajor Position="Inside" Offset="-11" Interval="20" Factor="12">

        <TickStyle Width="2">

            <Fill Color="#1E395B"></Fill>

        </TickStyle>

            </TickMajor>

            <TickMinor Position="Inside" Offset="-11" Visible="true" Interval="4" Factor="10">

        <TickStyle Width="1">

            <Fill Color="#1E395B"></Fill>

        </TickStyle>

    </TickMinor>

    <Pointer Shape="Tri" Length="0.5">

        <PointerStyle Stroke="#1E395B">

            <Fill Color="#1E395B"></Fill>

        </PointerStyle>

    </Pointer>

    <Face>

        <FaceStyle StrokeWidth="4">

            <Fill LinearGradientAngle="270" ColorBegin="#FFFFFF" ColorEnd="#7BA0CC" Type="LinearGradient"></Fill>

        </FaceStyle>

    </Face>

</Gauge:C1LinearGaugeExtender>

This will add a styled gauge to the page.

6. Add the following markup just below the gauge markup to add a slider and initialize it:

<p>Drag and release the slider to change the gauge's value:</p>

<div id="slider" style="width: 400px"></div>

<script type="text/javascript">

    $(document).ready(function () {

    $("#slider").slider({

        value: $("#<%= linearGauge.ClientID %>").wijlineargauge("option", "value"),

        change: function (event, ui) {

            $("#<%= linearGauge.ClientID %>").wijlineargauge("option", "value", ui.value);

        }

    });

    });

</script>

What You've Accomplished

Press F5 to run your application,  click and drag the slider's thumb button and observe that the gauge's value changes when the thumb button is released.