Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Slider / Ticks

This example shows different configuration of RadSlider's ticks

Decrease
  • 0
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 10
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 20
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 30
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 40
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 50
Increase
Decrease
  • 00
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 1010
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 2020
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 3030
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 4040
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 5050
Increase
Decrease
  • 0
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 10
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 20
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 30
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 40
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 50
Increase
Decrease
  • 0
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 10
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 20
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 30
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 40
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 50
Increase
Decrease
  • 00
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 1010
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 2020
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 3030
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 4040
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 5050
Increase
Decrease
  • 0
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 10
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 20
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 30
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 40
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 50
Increase

  • Configuring RadSlider's ticks


    You can easily configure the RadSlider control to display a tick mark indication for every step of the slider. There are two types of slider steps - SmallChange and LargeChange. Only the ticks marks for the LargeChange steps display the value of the slider in the step. You can use the following properties to configure the tick marks that the slider creates:

    • ItemType - Sets the type of the slider items. The possible values for this property are None, Item and Tick. When set to Tick, the slider will create tick marks for its steps, defined with the SmallChange and LargeChange properties. In case the size of the slider is not enough for the slider to display all SmallChange and LargeChange tick marks, the slider will display tick marks only for its LargeChange steps, provided there is enough space for all LargeChange tick marks.
    • LargeChange - The property was also known as ClickOffset (deprecated). This property defines the change in the value of the slider, when the user clicks on the track. The default value of the LargeChange property is 0. In this default mode, the slider does not create LargeChange ticks marks and it automatically scrolls to the value, which is positioned on the track closest to the point, where the user clicked.
    • SmallChange - The property was also known as SlideStep (deprecated). Using the SmallChange property, you can create a "discrete" slider which will change its value in the defined steps. For example if you have a slider with range from 0-100 and SmallChange set to 5, the values which the slider accepts are 0, 5, 10, 15, ... 95, 100. The default value of this property is 1.
    • TrackPosition - This property is used to set the position of the track relative to the items of the slider. It can be set to TopLeft, BottomRight and Center.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Slider.Ticks.DefaultVB"
        CodeFile="DefaultVB.aspx.vb" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
        .wrapperTable
        {
            width:750px;
            border-collapse: collapse;
        }
        
        .table
        {
            width:370px;
            border-collapse: collapse;
        }
        
        .table td
        {
            border: solid 1px #ccc;
            padding: 20px;
            text-align: center;
        }
        </style>
    </head>
    <body class="BODY">
        <form id="Form1" method="post" runat="server">
            <qsf:Header ID="Header1" runat="server" NavigationLanguage="VB" />
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
            <p>
                This example shows different configuration of RadSlider's ticks
            </p>
            <table class="wrapperTable">
                <tr>
                    <td>
                        <table class="table" style="height:342px;">
                            <tr>
                                <td colspan="3">
                                    <telerik:RadSlider runat="server" ID="RadSlider6" Orientation="Horizontal" Width="300"
                                        Height="50" MinimumValue="0" MaximumValue="50" LargeChange="10" TrackPosition="TopLeft"
                                        ItemType="Tick" IsSelectionRangeEnabled="true" SelectionStart="10" SelectionEnd="30"
                                        EnableServerSideRendering="true">
                                    </telerik:RadSlider>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3">
                                    <telerik:RadSlider runat="server" ID="RadSlider2" Orientation="Horizontal" Width="300"
                                        Height="50" MinimumValue="0" MaximumValue="50" LargeChange="10" TrackPosition="Center"
                                        ItemType="Tick" IsSelectionRangeEnabled="true" SelectionStart="10" SelectionEnd="30"
                                        EnableServerSideRendering="true">
                                    </telerik:RadSlider>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3">
                                    <telerik:RadSlider runat="server" ID="RadSlider1" Orientation="Horizontal" Width="300"
                                        Height="50" MinimumValue="0" MaximumValue="50" LargeChange="10" TrackPosition="BottomRight"
                                        ItemType="Tick" IsSelectionRangeEnabled="true" SelectionStart="10" SelectionEnd="30"
                                        EnableServerSideRendering="true">
                                    </telerik:RadSlider>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td>
                        <table class="table">
                            <tr>
                                <td>
                                    <telerik:RadSlider runat="server" ID="RadSlider3" Orientation="Vertical" Height="300"
                                        Width="50" MinimumValue="0" MaximumValue="50" LargeChange="10" TrackPosition="TopLeft"
                                        ItemType="Tick" IsSelectionRangeEnabled="true" SelectionStart="10" SelectionEnd="30"
                                        EnableServerSideRendering="true">
                                    </telerik:RadSlider>
                                </td>
                                <td>
                                    <telerik:RadSlider runat="server" ID="RadSlider5" Orientation="Vertical" Height="300"
                                        Width="50" MinimumValue="0" MaximumValue="50" LargeChange="10" TrackPosition="Center"
                                        ItemType="Tick" IsSelectionRangeEnabled="true" SelectionStart="10" SelectionEnd="30"
                                        EnableServerSideRendering="true">
                                    </telerik:RadSlider>
                                </td>
                                <td>
                                    <telerik:RadSlider runat="server" ID="RadSlider4" Orientation="Vertical" Height="300"
                                        Width="50" MinimumValue="0" MaximumValue="50" LargeChange="10" TrackPosition="BottomRight"
                                        ItemType="Tick" IsSelectionRangeEnabled="true" SelectionStart="10" SelectionEnd="30"
                                        EnableServerSideRendering="true">
                                    </telerik:RadSlider>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451