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 / Items

This example shows how to set custom slider items to the RadSlider control.

Decrease
  • Very bad
  • Bad
  • Average
  • Good
  • Very Good
Increase
Decrease
  • Very bad
  • Bad
  • Average
  • Good
  • Very Good
Increase
Decrease
  • Very bad
  • Bad
  • Average
  • Good
  • Very Good
Increase
Decrease
  • Very bad
  • Bad
  • Average
  • Good
  • Very Good
Increase
Decrease
  • Very bad
  • Bad
  • Average
  • Good
  • Very Good
Increase
Decrease
  • Very bad
  • Bad
  • Average
  • Good
  • Very Good
Increase

  • Slider Items


    You can define custom slider items for the RadSlider control and add them to the RadSlider's Items collection. As a result, the behavior of the slider changes - the items in the Items collection define the possible values for the slider. The Value, SelectionStart and SelectionEnd properties of the slider in this case represent the index in the Items collection of the currently selected slider item(s). Each slider item exposes the following properties:

    1. Text - sets the text that the slider item displays
    2. Value - sets the value of the slider item
    3. ToolTip - sets the tooltip of the slider item
    4. CssClass - sets the CSS class that is applied to the slider item

    You can access the currently selected item(s) using the following properties:

    1. SelectedItem - for a slider with IsSelectionRangeEnabled set to false. As the Value property of the slider in this case represents the index of the selected item, you can use the following code to get a reference to the selected slider item as well:
      RadSliderItem selectedItem = RadSlider1.Items[RadSlider1.Value];
    2. SelectedItems - for a slider with IsSelectionRangeEnabled set to true. As the SelectionStart and SelectionEnd properties of the slider in this case represent the indices of the selected items, you can use the following code to get a reference to the selected slider items:
      RadSliderItem selectedItem1 = RadSlider1.Items[RadSlider1.SelectionStart];
      RadSliderItem selectedItem2 = RadSlider1.Items[RadSlider1.SelectionStart];

Source Code

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

    <%@ 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
        {
            border-collapse: collapse;
        }

        .table td
        {
            border: solid 1px #ccc;
            padding: 4px;
            text-align: center;
        }
        </style>
    </head>
    <body class="BODY">
        <form id="Form1" method="post" runat="server">
            <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
            <p>
                This example shows how to set custom slider items to the <strong>RadSlider</strong>
                control.
            </p>
            <table class="wrapperTable">
                <tr>
                    <td>
                        <table class="table" style="height: 410px;width:400px;">
                            <tr>
                                <td colspan="3">
                                    <telerik:RadSlider runat="server" ID="RadSlider1" Orientation="Horizontal" Width="400"
                                        Height="40" TrackPosition="TopLeft" ItemType="Item" EnableServerSideRendering="true">
                                        <Items>
                                            <telerik:RadSliderItem Text="Very bad" Value="1" ToolTip="Very bad" runat="server"></telerik:RadSliderItem>
                                            <telerik:RadSliderItem Text="Bad" Value="2" ToolTip="Bad" runat="server"></telerik:RadSliderItem>
                                            <telerik:RadSliderItem Text="Average" Value="3" ToolTip="Average" runat="server"></telerik:RadSliderItem>
                                            <telerik:RadSliderItem Text="Good" Value="4" ToolTip="Good" runat="server"></telerik:RadSliderItem>
                                            <telerik:RadSliderItem Text="Very Good" Value="5" ToolTip="Very Good" runat="server"></telerik:RadSliderItem>
                                        </Items>
                                    </telerik:RadSlider>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3">
                                    <telerik:RadSlider runat="server" ID="RadSlider2" Orientation="Horizontal" Width="400"
                                        Height="40" TrackPosition="Center" ItemType="Item" EnableServerSideRendering="true">
                                        <Items>
                                            <telerik:RadSliderItem Text="Very bad" Value="1" ToolTip="Very bad" runat="server"></telerik:RadSliderItem>
                                            <telerik:RadSliderItem Text="Bad" Value="2" ToolTip="Bad" runat="server"></telerik:RadSliderItem>
                                            <telerik:RadSliderItem Text="Average" Value="3" ToolTip="Average" runat="server"></telerik:RadSliderItem>
                                            <telerik:RadSliderItem Text="Good" Value="4" ToolTip="Good" runat="server"></telerik:RadSliderItem>
                                            <telerik:RadSliderItem Text="Very Good" Value="5" ToolTip="Very Good" runat="server"></telerik:RadSliderItem>
                                        </Items>
                                    </telerik:RadSlider>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3">
                                    <telerik:RadSlider runat="server" ID="RadSlider6" Orientation="Horizontal" Width="400"
                                        Height="40" TrackPosition="BottomRight" ItemType="Item" EnableServerSideRendering="true">
                                        <Items>
                                            <telerik:RadSliderItem Text="Very bad" Value="1" ToolTip="Very bad" runat="server"></telerik:RadSliderItem>
                                            <telerik:RadSliderItem Text="Bad" Value="2" ToolTip="Bad" runat="server"></telerik:RadSliderItem>
                                            <telerik:RadSliderItem Text="Average" Value="3" ToolTip="Average" runat="server"></telerik:RadSliderItem>
                                            <telerik:RadSliderItem Text="Good" Value="4" ToolTip="Good" runat="server"></telerik:RadSliderItem>
                                            <telerik:RadSliderItem Text="Very Good" Value="5" ToolTip="Very Good" runat="server"></telerik:RadSliderItem>
                                        </Items>
                                    </telerik:RadSlider>
                                </td>
                            </tr>
                        </table>
                        </td>
                        <td>
                            <table class="table" style="width:330px">
                                <tr>
                                    <td>
                                        <telerik:RadSlider runat="server" ID="RadSlider3" Orientation="Vertical" Width="60"
                                            Height="400" TrackPosition="TopLeft" ItemType="Item" EnableServerSideRendering="true">
                                            <Items>
                                                <telerik:RadSliderItem Text="Very bad" Value="1" ToolTip="Very bad" runat="server"></telerik:RadSliderItem>
                                                <telerik:RadSliderItem Text="Bad" Value="2" ToolTip="Bad" runat="server"></telerik:RadSliderItem>
                                                <telerik:RadSliderItem Text="Average" Value="3" ToolTip="Average" runat="server"></telerik:RadSliderItem>
                                                <telerik:RadSliderItem Text="Good" Value="4" ToolTip="Good" runat="server"></telerik:RadSliderItem>
                                                <telerik:RadSliderItem Text="Very Good" Value="5" ToolTip="Very Good" runat="server"></telerik:RadSliderItem>
                                            </Items>
                                        </telerik:RadSlider>
                                    </td>
                                    <td>
                                        <telerik:RadSlider runat="server" ID="RadSlider5" Orientation="Vertical" Width="60"
                                            Height="400" TrackPosition="Center" ItemType="Item" EnableServerSideRendering="true">
                                            <Items>
                                                <telerik:RadSliderItem Text="Very bad" Value="1" ToolTip="Very bad" runat="server"></telerik:RadSliderItem>
                                                <telerik:RadSliderItem Text="Bad" Value="2" ToolTip="Bad" runat="server"></telerik:RadSliderItem>
                                                <telerik:RadSliderItem Text="Average" Value="3" ToolTip="Average" runat="server"></telerik:RadSliderItem>
                                                <telerik:RadSliderItem Text="Good" Value="4" ToolTip="Good" runat="server"></telerik:RadSliderItem>
                                                <telerik:RadSliderItem Text="Very Good" Value="5" ToolTip="Very Good" runat="server"></telerik:RadSliderItem>
                                            </Items>
                                        </telerik:RadSlider>
                                    </td>
                                    <td>
                                        <telerik:RadSlider runat="server" ID="RadSlider4" Orientation="Vertical" Width="60"
                                            Height="400" TrackPosition="BottomRight" ItemType="Item" EnableServerSideRendering="true">
                                            <Items>
                                                <telerik:RadSliderItem Text="Very bad" Value="1" ToolTip="Very bad" runat="server"></telerik:RadSliderItem>
                                                <telerik:RadSliderItem Text="Bad" Value="2" ToolTip="Bad" runat="server"></telerik:RadSliderItem>
                                                <telerik:RadSliderItem Text="Average" Value="3" ToolTip="Average" runat="server"></telerik:RadSliderItem>
                                                <telerik:RadSliderItem Text="Good" Value="4" ToolTip="Good" runat="server"></telerik:RadSliderItem>
                                                <telerik:RadSliderItem Text="Very Good" Value="5" ToolTip="Very Good" runat="server"></telerik:RadSliderItem>
                                            </Items>
                                        </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