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

Server-side API

  • Demo Configurator
  • Spin UpSpin Down

  • Track Position

  • Orientation

  • Item Type

  • Spin UpSpin Down

It is easy to configure a RadSlider control at runtime by changing the values of its server properties.

This example demonstrates how you can use the following properties:

  • SelectedRegionStartValue - The SelectedRegionStartValue property defines the rotator value from which the selected region starts. IsSelectionRangeEnabled should be set to false in order to be able to use this property.
  • Orientation - The Orientation property defines how the slider will be displayed in the page - vertically or horizontally.
  • SmallChange - Using the SmallChange property, you can create a "discrete" slider which will change its value in the defined steps.
  • LargeChange - Using the LargeChange property, you can define what should be the change in the value of the slider when the user clicks on the track.
  • AnimationDuration - The AnimationDuration property defines how long (in milliseconds) the animation of the sliding will run.
  • Enabled - Enables or disables the RadSlider control.
  • TrackMouseWheel - Using the TrackMouseWheel property, you can define if the value of the slider should be changed when the user is using the mousewheel over the track.
  • LiveDrag - The LiveDrag property defines when the value of the RadSlider changes - while you drag the dragHandle or when you release the dragHandle.
  • IsDirectionReversed - The IsDirectionReversed property defines the position of the MinimumValue and MaximumValue.
  • Width - The Width property defines the width of the RadSlider control.
  • Height - The Height property defines the height of the RadSlider control.
  • Value - Using the Value property, you can set the initial value of the slider.
  • SelectionStart - Using the SelectionStart property, you can set the first value of the slider in case IsSelectionRangeEnabled property is set to true.
  • SelectionEnd - Using the SelectionEnd property, you can set the second value of the slider in case IsSelectionRangeEnabled property is set to true.
  • MinimumValue - The MinimumValue property defines the smallest possible value of the RadSlider.
  • MaximumValue - The MaximumValue property defines the largest possible value of the RadSlider.
  • TrackPosition - The TrackPosition property defines the position of the track element in the RadSlider.
  • ItemType - The ItemType property defines the type of the slider items - Tick, Item or None.
  • ShowDragHandle - Using the ShowDragHandle property, you can configure the RadSlider not to display dragHandle(s).
  • ShowDecreaseHandle - Using the ShowDecreaseHandle property, you can configure the RadSlider not to display a decrease handle.
  • ShowIncreaseHandle - Using the ShowIncreaseHandle property, you can configure the RadSlider not to display an increase handle.
  • IsSelectionRangeEnabled - The IsSelectionRangeEnabled property defines whether the RadSlider should display one or two dragHandles.
  • EnableDragRange - Using the EnableDragRange property, you can specify whether the user can change both the SelectionStart and the SelectionEnd properties of the slider by dragging the selected region element.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Slider.ServerSideAPI.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!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>
</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">
            <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider1" Orientation="Horizontal"
                Width="370px" Height="70px" ItemType="tick" SmallChange="5" LargeChange="10" IsSelectionRangeEnabled="true"
                SelectionStart="10" SelectionEnd="50">
            </telerik:RadSlider>

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

            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" />
                            <telerik:AjaxUpdatedControl ControlID="RadSlider1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
        </div>
    </div>

    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox ID="WidthNtb" runat="server" Label="Width" Size="Narrow" MinValue="1" AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="HeightNtb" runat="server" Label="Height" Size="Narrow" MinValue="1" AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <h4>Value</h4>
                            <qsf:NumericTextBox ID="MinValueNtb" runat="server" Label="Min" Size="Narrow" AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="MaxValueNtb" runat="server" Label="Max" Size="Narrow" AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <h4>Slider steps</h4>
                            <qsf:NumericTextBox ID="SmallChangeNtb" runat="server" Label="Small Change" Size="Narrow" MinValue="1" AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="LargeChangeNtb" runat="server" Label="Large Change" Size="Narrow" MinValue="1" AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <h4>Selection</h4>
                            <qsf:NumericTextBox ID="SelectionStartNtb" runat="server" Label="Start" Size="Narrow" AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="SelectionEndNtb" runat="server" Label="End" Size="Narrow" AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <asp:CheckBox ID="SelectionRangeEnabledCb" runat="server" onclick="demo.selectionRangeChange(this);"
                                CssClass="selectionRangeEnabledCb" Text="Enable Selection Range" AutoPostBack="true" />
                        </li>
                        <li style="display: none;">
                            <qsf:NumericTextBox ID="SelectedRegionStartValueNtb" runat="server" Label="Selected Region Start Value" Size="Narrow" AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" />
                                <ClientEvents OnLoad="demo.selectedRegionNtbLoad" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox ID="AnimationDurationNtb" runat="server" Label="Animation Duration" Size="Narrow" MinValue="0" AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:RadioButtonList ID="TrackPositionRadioButtonList" runat="server" Label="Track Position" AutoPostBack="true">
                                <asp:ListItem Text="Top Left" Value="TopLeft"></asp:ListItem>
                                <asp:ListItem Text="Center" Value="Center" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="Bottom Right" Value="BottomRight"></asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                        <li>
                            <qsf:RadioButtonList ID="OrientationRadioButtonList" runat="server" Orientation="Horizontal" Label="Orientation" AutoPostBack="true">
                                <asp:ListItem Text="Horizontal" Value="Horizontal" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="Vertical" Value="Vertical"></asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                        <li>
                            <qsf:RadioButtonList ID="ItemTypeRadioButtonList" runat="server" Label="Item Type" Orientation="Horizontal" CssClass="itemsType" AutoPostBack="true">
                                <asp:ListItem Text="Item" Value="Item"></asp:ListItem>
                                <asp:ListItem Text="Tick" Value="Tick" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="None" Value="None"></asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                        <li style="display: none;">
                            <qsf:NumericTextBox ID="ItemsCountNtb" runat="server" Label="Items Count" Size="Narrow" MinValue="1" Value="5" AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" />
                                <ClientEvents OnLoad="demo.itemsCountNtbLoad" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Narrow">
                    <ul class="fb-group checkbox-list">
                        <li>
                            <asp:CheckBox ID="EnabledRadSliderCb" runat="server" Text="Enable RadSlider" AutoPostBack="true" />
                        </li>
                        <li>
                            <asp:CheckBox ID="TrackMouseWheelCb" runat="server" Text="Track Mouse Wheel" AutoPostBack="true" />
                        </li>
                        <li>
                            <asp:CheckBox ID="ShowDragHandleCb" runat="server" Text="Show Drag Handle" AutoPostBack="true" />
                        </li>
                        <li>
                            <asp:CheckBox ID="LiveDragCb" runat="server" Text="Enable Live Drag" AutoPostBack="true" />
                        </li>
                        <li>
                            <asp:CheckBox ID="ShowDecreaseHandleCb" runat="server" Text="Show Decrease Handle" AutoPostBack="true" /></li>
                        <li>
                            <asp:CheckBox ID="ShowIncreaseHandleCb" runat="server" Text="Show Increase Handle" AutoPostBack="true" /></li>
                        <li>
                            <asp:CheckBox ID="DirectionReversedCb" runat="server" Text="Reverse Direction" AutoPostBack="true" />
                        </li>
                        <li>
                            <asp:CheckBox ID="EnableDragRangeCb" runat="server" Text="Enable DragRange" AutoPostBack="true" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance