Slider - Server-side Events

Value at server-side event: None
Range at server-side event: None - None
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
RadSlider raises the OnValueChanged server side event when its value has been changed.
Set the AutoPostBack property in order for the event to be raised right after the value is changed on the client.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="false" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Slider.ServerSideEvents.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</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 size-thin">
        <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider1" OnValueChanged="RadSlider1_ValueChanged" Width="300px"
                           AutoPostBack="true">
        </telerik:RadSlider>
        <div class="module">
            Value at server-side event:
            <asp:Label ID="Label1" runat="server" CssClass="demo-value" Text="None" />
        </div>
    </div>
    <div class="demo-container size-thin">
        <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider2" IsSelectionRangeEnabled="true" Width="300px"
                           OnValueChanged="RadSlider2_ValueChanged" SelectionStart="20" SelectionEnd="80"
                           MinimumValue="0" MaximumValue="100" AutoPostBack="true">
        </telerik:RadSlider>
        <div class="module">
            Range at server-side event:
            <asp:Label ID="LabelSelectionStart" runat="server" CssClass="demo-value" Text="None" /> -
            <asp:Label ID="LabelSelectionEnd" runat="server" CssClass="demo-value" Text="None" />
        </div>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadSlider1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Label1" UpdatePanelRenderMode="Inline"/>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadSlider2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="LabelSelectionStart" UpdatePanelRenderMode="Inline" />
                        <telerik:AjaxUpdatedControl ControlID="LabelSelectionEnd" UpdatePanelRenderMode="Inline" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?