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

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

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.
  • DefaultVB.aspx
  • styles.css
<%@ Page Language="vb" AutoEventWireup="false"  %>

<!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-wide">
        <table class="wrapperTable">
            <tr>
                <td>
                    <table class="innerTable" style="height: 342px;">
                        <tr>
                            <td colspan="3">
                                <telerik:RadSlider RenderMode="Lightweight" 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 RenderMode="Lightweight" 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 RenderMode="Lightweight" 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="innerTable">
                        <tr>
                            <td>
                                <telerik:RadSlider RenderMode="Lightweight" 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 RenderMode="Lightweight" 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 RenderMode="Lightweight" 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>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance