Slider - Client-side API

Demo Configurator

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadSlider provides a flexible client-side API allowing you to change all exposed properties, as well as instantiate a RadSlider control directly on the client.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Slider.ClientSideAPI.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!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>
    <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" OnClientLoad="demo.sliderClientLoad"
                Width="370px" Height="70px" ItemType="tick" SmallChange="5" LargeChange="10" IsSelectionRangeEnabled="true"
                SelectionStart="10" SelectionEnd="50">
            </telerik:RadSlider>
        </div>
    </div>

    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <h4>Selection</h4>
                            <qsf:NumericTextBox ID="SelectionStartNtb" runat="server" Label="Start" Size="Narrow">
                                <NumberFormat DecimalDigits="1" />
                                <ClientEvents OnLoad="demo.selectionStartNtbLoad" OnValueChanged="demo.selectionStartNtbValueChange" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="SelectionEndNtb" runat="server" Label="End" Size="Narrow">
                                <NumberFormat DecimalDigits="1" />
                                <ClientEvents OnLoad="demo.selectionEndNtbLoad" OnValueChanged="demo.selectionEndNtbValueChange" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:NumericTextBox ID="WidthNtb" runat="server" Label="Width" Size="Narrow" MinValue="0">
                                <NumberFormat DecimalDigits="1" />
                                <ClientEvents OnLoad="demo.widthNtbLoad" OnValueChanged="demo.widthNtbValueChange" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="HeightNtb" runat="server" Label="Height" Size="Narrow" MinValue="0">
                                <NumberFormat DecimalDigits="1" />
                                <ClientEvents OnLoad="demo.heightNtbLoad" OnValueChanged="demo.heightNtbValueChange" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <h4>Value</h4>
                            <qsf:NumericTextBox ID="MinValueNtb" runat="server" Label="Min" Size="Narrow">
                                <NumberFormat DecimalDigits="1" />
                                <ClientEvents OnLoad="demo.minValueNtbLoad" OnValueChanged="demo.minValueNtbValueChange" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="MaxValueNtb" runat="server" Label="Max" Size="Narrow">
                                <NumberFormat DecimalDigits="1" />
                                <ClientEvents OnLoad="demo.maxValueNtbLoad" OnValueChanged="demo.maxValueNtbValueChange" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:NumericTextBox ID="AnimationDurationNtb" runat="server" Label="Animation Duration" Size="Narrow" MinValue="0">
                                <NumberFormat DecimalDigits="1" />
                                <ClientEvents OnValueChanged="demo.animationDurationNtbValueChange" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <h4>Slider steps</h4>
                            <qsf:NumericTextBox ID="SmallChangeNtb" runat="server" Label="Small Change" Size="Narrow" MinValue="0">
                                <NumberFormat DecimalDigits="1" />
                                <ClientEvents OnValueChanged="demo.smallChangeNtbValueChange" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="LargeChangeNtb" runat="server" Label="Large Change" Size="Narrow" MinValue="0">
                                <NumberFormat DecimalDigits="1" />
                                <ClientEvents OnValueChanged="demo.largeChangeNtbValueChange" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:RadioButtonList ID="OrientationRadioButtonList" runat="server" Orientation="Horizontal" Label="Orientation" CssClass="orientation">
                                <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="TrackPositionRadioButtonList" runat="server" Label="Track Position" CssClass="trackPosition">
                                <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>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Narrow">
                    <ul class="fb-group checkbox-list">
                        <li>
                            <asp:CheckBox ID="EnabledRadSliderCb" runat="server" onclick="demo.toggleEnableSlider();"
                                Text="Enable RadSlider"></asp:CheckBox>
                        </li>
                        <li>
                            <asp:CheckBox ID="TrackMouseWheelCb" runat="server" onclick="demo.toggleTrackMouseWheel();"
                                Text="Track Mouse Wheel"></asp:CheckBox>
                        </li>
                        <li>
                            <asp:CheckBox ID="ShowDragHandleCb" runat="server" onclick="demo.toggleDragHandleVisible();"
                                Text="Show Drag Handle"></asp:CheckBox>
                        </li>
                        <li>
                            <asp:CheckBox ID="LiveDragCb" runat="server" onclick="demo.toggleLiveDrag();"
                                Text="Enable Live Drag"></asp:CheckBox>
                        </li>
                        <li>
                            <asp:CheckBox ID="ShowDecreaseHandleCb" runat="server" onclick="demo.toggleDecreaseHandleVisible();"
                                Text="Show Decrease Handle"></asp:CheckBox></li>
                        <li>
                            <asp:CheckBox ID="ShowIncreaseHandleCb" runat="server" onclick="demo.toggleIncreaseHandleVisible();"
                                Text="Show Increase Handle"></asp:CheckBox></li>
                        <li>
                            <asp:CheckBox ID="SelectionRangeEnabledCb" runat="server" onclick="demo.toggleIsSelectionRangeEnabled();"
                                Text="Enable Selection Range"></asp:CheckBox>
                        </li>
                        <li>
                            <asp:CheckBox ID="DirectionReversedCb" runat="server" onclick="demo.toggleIsDirectionReversed();"
                                Text="Reverse Direction"></asp:CheckBox>
                        </li>
                        <li>
                            <asp:CheckBox ID="EnableDragRangeCb" runat="server" onclick="demo.toggleEnableDragRange();"
                                Text="Enable DragRange"></asp:CheckBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?