<%@ Page Language="C#" %>
<%@ 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>