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

Drag Range

Slider with None ItemType

$0 $300
Range from server (after AJAX request): $50 - $200

Slider with Tick ItemType

  • 0
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 100
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 200
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 300
Range from server (after AJAX request): 50 - 200

Slider with Items ItemType

Decrease
  • Very bad
  • Bad
  • Average
  • Good
  • Very Good
Increase
Range from server (after AJAX request): Average - Very Good
  • Demo Configurator

Enable DragRange

The EnableDragRange property of RadSlider specifies the behavior of the slider, when the user clicks on its selected region element. The value of this property influences the behavior of the control only in case IsSelectionRangeEnabled property is set to true.

The possible values for EnableDragRange are:
  • false (default value) - When the user clicks on the selected region element, the dragHandle (thumb) that is closest to the point where he/she clicked, will move either with the value of LargeChange, or to the nearest to that point value, in case LargeChange is 0.
  • true - When the user clicks on the selected region element and holds the left mouse button down, he/she can drag the selected region element, thus changing both SelectionStart and SelectionEnd values.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Slider.DragRange.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script type="text/javascript" src="scripts.js"></script>
    <link href="styles.css" rel="stylesheet" />
</head>

    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server" >
        <Views>
            <qsf:View>
                <qsf:RadioButtonList ID="rblEnableDragRange" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblEnableDragRange_SelectedIndexChanged" Label="Enable DragRange" Orientation="Horizontal">
                    <asp:ListItem Selected="True" Text="True" Value="true"></asp:ListItem>
                    <asp:ListItem Selected="False" Text="False" Value="false"></asp:ListItem>
                </qsf:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

<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-narrow">
        <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip1" runat="server" OffsetY="20" Position="TopCenter"
                            ShowCallout="false" ShowEvent="FromCode" HideEvent="FromCode">
        </telerik:RadToolTip>
        <h4>Slider with None ItemType</h4>
        <table>
            <tr>
                <td>$0</td>
                <td>
                    <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider1" CssClass="dragRangeSlider" Width="400px"
                                       IsSelectionRangeEnabled="true" MinimumValue="0" MaximumValue="300" SmallChange="1"
                                       SelectionStart="50" SelectionEnd="200" OnClientValueChanged="OnClientValueChanged"
                                       OnClientSlideStart="OnClientSlideStart" OnClientSlide="OnClientSlide" OnClientSlideEnd="OnClientSlideEnd"
                                       OnClientSlideRangeStart="OnClientSlideRangeStart" OnClientSlideRange="OnClientSlideRange"
                                       OnClientSlideRangeEnd="OnClientSlideRangeEnd" OnValueChanged="RadSlider1_ValueChanged"
                                       AutoPostBack="true" ShowDecreaseHandle="false" ShowIncreaseHandle="false" EnableDragRange="true"
                                       EnableServerSideRendering="true">
                    </telerik:RadSlider>
                </td>
                <td>$300</td>
            </tr>
        </table>
        <div class="infoContainer">
            Range from server (after AJAX request):
            <strong>
                $<asp:Label ID="lblSelectionStart" runat="server" Text="50" /> - $<asp:Label ID="lblSelectionEnd" runat="server" Text="200" />
            </strong>
        </div>
    </div>
    <div class="demo-container size-narrow">
        <h4>Slider with Tick ItemType</h4>
        <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider2" CssClass="dragRangeSlider" Width="450px"
                           Height="45px" TrackPosition="TopLeft" IsSelectionRangeEnabled="true" MinimumValue="0"
                           MaximumValue="300" SmallChange="10" LargeChange="100" SelectionStart="50" SelectionEnd="200"
                           OnClientValueChanged="OnClientValueChanged" OnClientSlideStart="OnClientSlideStart"
                           OnClientSlide="OnClientSlide" OnClientSlideEnd="OnClientSlideEnd" ShowDecreaseHandle="false"
                           ShowIncreaseHandle="false" OnClientSlideRangeStart="OnClientSlideRangeStart"
                           OnClientSlideRange="OnClientSlideRange" OnClientSlideRangeEnd="OnClientSlideRangeEnd"
                           OnValueChanged="RadSlider2_ValueChanged" AutoPostBack="true" EnableDragRange="true"
                           ItemType="Tick" EnableServerSideRendering="true">
        </telerik:RadSlider>
        <div class="infoContainer">
            Range from server (after AJAX request):
            <strong>
                <asp:Label ID="lblSelectionStart2" runat="server" Text="50" /> - <asp:Label ID="lblSelectionEnd2" runat="server" Text="200" />
            </strong>
        </div>
    </div>
    <div class="demo-container size-narrow">
        <h4>Slider with Items ItemType</h4>
        <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider3" CssClass="dragRangeSlider" Width="450px"
                           Height="40px" IsSelectionRangeEnabled="true" SelectionStart="2" SelectionEnd="4"
                           OnClientValueChanged="OnClientValueChanged" OnClientSlideStart="OnClientSlideStart"
                           OnClientSlide="OnClientSlide" OnClientSlideEnd="OnClientSlideEnd" OnClientSlideRangeStart="OnClientSlideRangeStart"
                           OnClientSlideRange="OnClientSlideRange" OnClientSlideRangeEnd="OnClientSlideRangeEnd"
                           OnValueChanged="RadSlider3_ValueChanged" AutoPostBack="true" EnableDragRange="true"
                           ItemType="Item" EnableServerSideRendering="true" TrackPosition="BottomRight">
            <Items>
                <telerik:RadSliderItem Text="Very bad" Value="1" runat="server"></telerik:RadSliderItem>
                <telerik:RadSliderItem Text="Bad" Value="2" runat="server"></telerik:RadSliderItem>
                <telerik:RadSliderItem Text="Average" Value="3" runat="server"></telerik:RadSliderItem>
                <telerik:RadSliderItem Text="Good" Value="4" runat="server"></telerik:RadSliderItem>
                <telerik:RadSliderItem Text="Very Good" Value="5" runat="server"></telerik:RadSliderItem>
            </Items>
        </telerik:RadSlider>
        <div class="infoContainer">
            Range from server (after AJAX request):
            <strong>
                <asp:Label ID="lblSelectionStart3" runat="server" Text="Average" /> - <asp:Label ID="lblSelectionEnd3" runat="server" Text="Very Good" />
            </strong>
        </div>
    </div>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadSlider1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="lblSelectionStart" UpdatePanelRenderMode="Inline"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="lblSelectionEnd" UpdatePanelRenderMode="Inline"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadSlider2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="lblSelectionStart2" UpdatePanelRenderMode="Inline"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="lblSelectionEnd2" UpdatePanelRenderMode="Inline"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadSlider3">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="lblSelectionStart3" UpdatePanelRenderMode="Inline"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="lblSelectionEnd3" UpdatePanelRenderMode="Inline"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="rblEnableDragRange">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rblEnableDragRange" UpdatePanelRenderMode="Inline"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadSlider1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadSlider2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadSlider3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function getTooltip() {
                return $find("<%= RadToolTip1.ClientID %>");
            }
        </script>
    </telerik:RadCodeBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance