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

Server-side Events

Value at server-side event: None
Range at server-side event: None - None
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>
<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>

Support & Learning Resources

Find Assistance