Gauge - Volume Control

Volume : %.
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js" type="text/javascript"></script>
    <link href="styles.css" rel="stylesheet" />
    <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">
                <Scale Min="0" Max="100">
                    <MajorTicks Visible="false" />
                    <MinorTicks Visible="false" />
                    <Labels Template="#=value#%" />
                        <telerik:GaugeRange From="0" To="50" Color="Orange" />
                        <telerik:GaugeRange From="50" To="80" Color="Green" />
                        <telerik:GaugeRange From="80" To="100" Color="Red" />
        <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"
        <div id="volumeContainer">
            Volume : <span id="currentValue"></span>%.
    <script type="text/javascript">
        Sys.Application.add_load(function() {
            telerikDemo.volumeGauge = $find("<%=volumeGauge.ClientID %>");
            $find("<%=volumeSlider.ClientID %>").set_value(60);

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?