Slider - Items

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
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.SelectionEnd];
  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#" AutoEventWireup="false"  %>

<!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>
    <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: 410px; width: 400px;">
                        <tr>
                            <td colspan="3">
                                <telerik:RadSlider RenderMode="Lightweight" 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 RenderMode="Lightweight" 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 RenderMode="Lightweight" 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="innerTable" style="width: 330px; margin-left: 20px;">
                        <tr>
                            <td>
                                <telerik:RadSlider RenderMode="Lightweight" 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 RenderMode="Lightweight" 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 RenderMode="Lightweight" 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>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?