<%@ Page Language="C#" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-containers">
<div class="demo-container no-bg">
<telerik:RadArcGauge runat="server" ID="RadArcGauge1" Font-Size="X-Large" Width="300">
<Appearance Margin="20"></Appearance>
<CenterTemplate>
<span style="color: #: color #;">#: value #%</span>
</CenterTemplate>
<ColorsCollection>
<telerik:ArcGaugeColor From="0" To="24" Color="Green" />
<telerik:ArcGaugeColor From="25" To="49" Color="YellowGreen" />
<telerik:ArcGaugeColor From="50" To="74" Color="Orange" />
<telerik:ArcGaugeColor From="75" To="100" Color="OrangeRed" />
</ColorsCollection>
</telerik:RadArcGauge>
</div>
<div class="demo-container no-bg">
<telerik:RadCircularGauge runat="server" ID="RadCircularGauge1" Font-Size="X-Large" Height="300" Width="300">
<Appearance Margin="20"></Appearance>
<CenterTemplate>
<span style="color: #: color #;">#: value #%</span>
</CenterTemplate>
<ColorsCollection>
<telerik:ArcGaugeColor From="0" To="24" Color="OrangeRed" />
<telerik:ArcGaugeColor From="25" To="49" Color="Orange" />
<telerik:ArcGaugeColor From="50" To="74" Color="YellowGreen" />
<telerik:ArcGaugeColor From="75" To="100" Color="Green" />
</ColorsCollection>
</telerik:RadCircularGauge>
</div>
<br />
<div class="demo-container no-bg fb-size-wide">
<telerik:RadSlider runat="server" ID="RadSlider3"
MinimumValue="0" Value="80" MaximumValue="100" ShowDecreaseHandle="false"
ShowIncreaseHandle="false" OnClientValueChanged="clientValueChanged">
</telerik:RadSlider>
</div>
</div>
<script>
function pageLoad() {
var arcGauge = $find("<%= RadArcGauge1.ClientID %>");
var circularGauge = $find("<%= RadCircularGauge1.ClientID %>");
var slider = $find("<%= RadSlider3.ClientID %>");
arcGauge.set_value(slider.get_value());
circularGauge.set_value(slider.get_value());
}
function clientValueChanged(sender, args) {
var arcGauge = $find("<%= RadArcGauge1.ClientID %>");
var circularGauge = $find("<%= RadCircularGauge1.ClientID %>");
arcGauge.set_value(args.get_newValue());
circularGauge.set_value(args.get_newValue());
}
</script>
</form>
</body>
</html>