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

Keyboard support

Deafult direction Reversed direction
Single handle; AccessKey: A
Decrease
  • 00
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 1010
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 2020
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 3030
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 4040
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 5050
Increase
Single handle; AccessKey: B
Increase
  • 5050
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 4040
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 3030
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 2020
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 1010
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 00
Decrease
Two handles, ThumbsInteractionMode="Free"; AccessKey: C
Decrease
  • 00
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 1010
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 2020
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 3030
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 4040
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 5050
Increase
Two handles, ThumbsInteractionMode="Free"; AccessKey: S
Increase
  • 5050
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 4040
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 3030
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 2020
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 1010
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 00
Decrease
Two handles, ThumbsInteractionMode="Lock"; AccessKey: E
Decrease
  • 0
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 10
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 20
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 30
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 40
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 50
Increase
Two handles, ThumbsInteractionMode="Lock"; AccessKey: F
Increase
  • 50
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 40
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 30
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 20
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 10
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 0
Decrease
Two handles, ThumbsInteractionMode="Push"; AccessKey: K
Decrease
  • 0
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 10
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 20
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 30
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 40
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 50
Increase
Two handles, ThumbsInteractionMode="Push"; AccessKey: H
Increase
  • 50
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 40
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 30
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 20
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 10
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 0
Decrease
  • This example demonstrates how you can use the keyboard to control RadSlider. You can focus a handle by using the Tab key if you set the TabIndex property of RadSlider.
  • In addition, you can use a shortcut if you set the AccessKey property. Once a handle is focused you can use Arrow Keys , Page Up , Page Down , Home and End keys to change the value.
  • Press Alt + AccessKey in IE / Chrome, Alt + Shift + AccessKey in FireFox, Shift + Esc + AccessKey in Opera, or use Tab to focus the first handle of a slider. Press Tab to focus the second handle.
  • Press Right Arrow / Up Arrow to increase the value of a focused handle with a small change. Press Left Arrow / Down Arrow to decrease the value of a focused handle with a small change.
  • Press Page Up to increase the value of a focused handle with a large change.Press Page Down to increase the value of a focused handle with a large change.
  • Press Home to put a focused handle to the minimum value. Press End to to put a focused handle to the maximum value.

Note: By default tab-access is disabled in Safari. To enable it, check "Preferences > Advanced > Press tab to highlight each item on a page".
  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#" 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="layoutTable">
            <tr>
                <td>
                    Deafult direction
                </td>
                <td>
                    Reversed direction
                </td>
            </tr>
            <tr>
                <td>Single handle; AccessKey: A
                    <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider1" Orientation="Horizontal" Width="300"
                        Height="50" MinimumValue="0" MaximumValue="50" LargeChange="10" ItemType="Tick"
                        EnableServerSideRendering="true" AccessKey="A" TabIndex="1">
                    </telerik:RadSlider>
                </td>
                <td>Single handle; AccessKey: B
                    <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider4" Orientation="Horizontal" Width="300"
                        Height="50" MinimumValue="0" MaximumValue="50" LargeChange="10" ItemType="Tick"
                        EnableServerSideRendering="true" AccessKey="B" IsDirectionReversed="true" TabIndex="2">
                    </telerik:RadSlider>
                </td>
            </tr>
            <tr>
                <td>Two handles, ThumbsInteractionMode="Free"; AccessKey: C
                    <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" AccessKey="C" TabIndex="3">
                    </telerik:RadSlider>
                </td>
                <td>Two handles, ThumbsInteractionMode="Free"; AccessKey: S
                    <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider5" Orientation="Horizontal" Width="300"
                        Height="50" MinimumValue="0" MaximumValue="50" LargeChange="10" TrackPosition="Center"
                        ItemType="Tick" IsSelectionRangeEnabled="true" SelectionStart="10" SelectionEnd="30"
                        EnableServerSideRendering="true" AccessKey="S" TabIndex="4" IsDirectionReversed="true">
                    </telerik:RadSlider>
                </td>
            </tr>
            <tr>
                <td>Two handles, ThumbsInteractionMode="Lock"; AccessKey: E
                    <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider3" Orientation="Horizontal" Width="300"
                        Height="50" MinimumValue="0" MaximumValue="50" LargeChange="10" TrackPosition="BottomRight"
                        ItemType="Tick" IsSelectionRangeEnabled="true" SelectionStart="10" SelectionEnd="30"
                        EnableServerSideRendering="true" AccessKey="E" ThumbsInteractionMode="Lock" TabIndex="5">
                    </telerik:RadSlider>
                </td>
                <td>Two handles, ThumbsInteractionMode="Lock"; AccessKey: F
                    <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider6" Orientation="Horizontal" Width="300"
                        Height="50" MinimumValue="0" MaximumValue="50" LargeChange="10" TrackPosition="BottomRight"
                        ItemType="Tick" IsSelectionRangeEnabled="true" SelectionStart="10" SelectionEnd="30"
                        EnableServerSideRendering="true" AccessKey="F" ThumbsInteractionMode="Lock" TabIndex="6"
                        IsDirectionReversed="true">
                    </telerik:RadSlider>
                </td>
            </tr>
            <tr>
                <td>Two handles, ThumbsInteractionMode="Push"; AccessKey: K
                    <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider7" Orientation="Horizontal" Width="300"
                        Height="50" MinimumValue="0" MaximumValue="50" LargeChange="10" TrackPosition="BottomRight"
                        ItemType="Tick" IsSelectionRangeEnabled="true" SelectionStart="10" SelectionEnd="30"
                        EnableServerSideRendering="true" AccessKey="K" ThumbsInteractionMode="Push" TabIndex="7">
                    </telerik:RadSlider>
                </td>
                <td>Two handles, ThumbsInteractionMode="Push"; AccessKey: H
                    <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider8" Orientation="Horizontal" Width="300"
                        Height="50" MinimumValue="0" MaximumValue="50" LargeChange="10" TrackPosition="BottomRight"
                        ItemType="Tick" IsSelectionRangeEnabled="true" SelectionStart="10" SelectionEnd="30"
                        EnableServerSideRendering="true" AccessKey="H" ThumbsInteractionMode="Push" TabIndex="8"
                        IsDirectionReversed="true">
                    </telerik:RadSlider>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance