New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Volume Control

Volume : %.

This demo shows how other controls can be added around the gauge to provide a functional interface, not just a visualization of the data. In this case a RadSlider is positioned slightly on top of the gauge to mimic the Windows volume control. The positioning takes into account the dimensions of the gauge and compensates for the paddings the gauge has.

  • DefaultVB.aspx
  • scripts.js
  • styles.css
<%@ Page Language="vb"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js" type="text/javascript"></script>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <div id="gaugeContainer">
            <telerik:RadLinearGauge runat="server" ID="volumeGauge" Width="50px" Height="300px" Skin="Windows7">
                <Pointer Shape="Arrow">
                </Pointer>
                <Scale Min="0" Max="100">
                    <MajorTicks Visible="false" />
                    <MinorTicks Visible="false" />
                    <Labels Template="#=value#%" />
                    <Ranges>
                        <telerik:GaugeRange From="0" To="50" Color="Orange" />
                        <telerik:GaugeRange From="50" To="80" Color="Green" />
                        <telerik:GaugeRange From="80" To="100" Color="Red" />
                    </Ranges>
                </Scale>
            </telerik:RadLinearGauge>
        </div>
        <div id="sliderContainer">
            <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="volumeSlider" Orientation="Vertical" ShowDecreaseHandle="false"
                IsDirectionReversed="true" ShowIncreaseHandle="false" MinimumValue="0"
                MaximumValue="100" Height="273px" OnClientValueChanged="telerikDemo.OnClientValueChanged" Skin="Windows7"
                Width="50px">
            </telerik:RadSlider>
        </div>
        <div id="volumeContainer">
            Volume : <span id="currentValue"></span>%.
        </div>
    </div>
    <script type="text/javascript">
        Sys.Application.add_load(function() {
            telerikDemo.volumeGauge = $find("<%=volumeGauge.ClientID %>");
            $find("<%=volumeSlider.ClientID %>").set_value(60);
        });
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance