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

WebForms Slider Overview

  • Demo Configurator

  • Orientation

  • Direction

  • Server-side rendering

  • Track Position

  • Number of dragHandles

  • Thumbs interaction mode

  • Enable/Disable RadSlider

About RadSlider for ASP.NET AJAX

You know how convenient the sliding bar in your media player is. You can achieve the same user experience pattern in your web app. Whether you want to select a value from a defined range or define a range with the 2-drag handles, use the smooth or step-based Telerik Slider control for ASP.NET AJAX. The control is completely customizable in terms of appearance and offers plethora of configuration options like orientation, ticks functionality, click offset, mouse wheel support, etc.

RadSlider and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Horizontal/Vertical Orientation - depending on your needs, RadSlider can be displayed horizontally or vertically on the page by setting the Orientation property
  • Direction - you can configure the RadSlider to reverse its standard direction using its IsDirectionReversed property
  • RadSlider items - You can specify the type of items with which the RadSlider works using its ItemType property
  • Range slider - The RadSlider can display one or two dragHandles thus providing you with the ability to select a single value or a range of values from a defined range
  • Decrease/Increase/Drag Handles - The slider layout can be customized using one of the handle properties that control which slider handles will be displayed - Increase Handle, Decrease Handle or Drag Handle
  • Slider Animation - you can create smooth slide animations to a specified point without any browser interference
  • MouseWheel Support - grabbing and dragging can be annoying at times, so that's why mouse wheel support could be a very nice alternative
  • LargeChange - you can define the change in value of the distance, at which the slider will jump slider when the user clicks on the track
  • View-Only Mode - in some cases you might need to simply display the slider as disabled, and prohibit changes in its value
  • Advanced Skinning - The visual appearance of RadSlider can be easily customized through skins. You can use one of the predefined skins or create your own
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Slider.Overview.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!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">
        <asp:Panel ID="RadSliders_Wrapper" runat="server" CssClass="sliderView horizontalSliderView">
            <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider_Items" runat="server" ItemType="item" Width="400px"
                Height="70px" AnimationDuration="400" CssClass="ItemsSlider" ThumbsInteractionMode="Free">
                <Items>
                    <telerik:RadSliderItem Text="Jan" Value="1"></telerik:RadSliderItem>
                    <telerik:RadSliderItem Text="Feb" Value="2"></telerik:RadSliderItem>
                    <telerik:RadSliderItem Text="Mar" Value="3"></telerik:RadSliderItem>
                    <telerik:RadSliderItem Text="Apr" Value="4"></telerik:RadSliderItem>
                    <telerik:RadSliderItem Text="May" Value="5"></telerik:RadSliderItem>
                    <telerik:RadSliderItem Text="Jun" Value="6"></telerik:RadSliderItem>
                    <telerik:RadSliderItem Text="Jul" Value="7"></telerik:RadSliderItem>
                    <telerik:RadSliderItem Text="Aug" Value="8"></telerik:RadSliderItem>
                    <telerik:RadSliderItem Text="Sep" Value="9"></telerik:RadSliderItem>
                    <telerik:RadSliderItem Text="Oct" Value="10"></telerik:RadSliderItem>
                    <telerik:RadSliderItem Text="Nov" Value="11"></telerik:RadSliderItem>
                    <telerik:RadSliderItem Text="Dec" Value="12"></telerik:RadSliderItem>
                </Items>
            </telerik:RadSlider>
            <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider_Ticks" runat="server" MinimumValue="0" MaximumValue="100"
                SmallChange="5" LargeChange="10" ItemType="tick" Height="70px" Width="400px"
                AnimationDuration="400" CssClass="TicksSlider" ThumbsInteractionMode="Free">
            </telerik:RadSlider>
            <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider_NoItems" runat="server" Height="70px" Width="400px"
                AnimationDuration="400" ThumbsInteractionMode="Free">
            </telerik:RadSlider>
        </asp:Panel>
    </div>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ChooseTrackPosition">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadSliders_Wrapper" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="ChooseTrackPosition"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBoxListOrienation">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadSliders_Wrapper" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="CheckBoxListOrienation"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadioButtonListRange">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadSliders_Wrapper" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadioButtonListRange"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadioButtonListReverse">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadSliders_Wrapper" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadioButtonListReverse"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ChooseThumbsInteractionMode">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadSliders_Wrapper" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="ChooseThumbsInteractionMode"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadioButtonListEnabled">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadSliders_Wrapper" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadioButtonListEnabled"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance