Slider - Thumbs Interaction Mode

Free thumbs interaction mode
Decrease
  • 00
  •  
  • 1010
  •  
  • 2020
  •  
  • 3030
  •  
  • 4040
  •  
  • 5050
  •  
  • 6060
  •  
  • 7070
  •  
  • 8080
  •  
  • 9090
  •  
  • 100100
Increase

Lock thumbs interaction mode
Decrease
  • 00
  •  
  • 1010
  •  
  • 2020
  •  
  • 3030
  •  
  • 4040
  •  
  • 5050
  •  
  • 6060
  •  
  • 7070
  •  
  • 8080
  •  
  • 9090
  •  
  • 100100
Increase

Push thumbs interaction mode
Decrease
  • 00
  •  
  • 1010
  •  
  • 2020
  •  
  • 3030
  •  
  • 4040
  •  
  • 5050
  •  
  • 6060
  •  
  • 7070
  •  
  • 8080
  •  
  • 9090
  •  
  • 100100
Increase
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The ThumbsInteractionMode property of RadSlider specifies how the two thumbs of the slider, in case IsSelectionRangeEnabled property is set to true, interact. The different interaction modes influence the behavior of the control only in case IsSelectionRangeEnabled property is set to true. The possible values for ThumbsInteractionMode are:

  • Free - The two thumbs can accept any value in the range [MinimumValue; MaximumValue].
  • Lock - The first thumb can accept any value in the range [MinimumValue; SelectionEnd], whereas the second thumb can accept any value in the range [SelectionStart; MaximumValue].
  • Push - The first thumb pushes the second thumb, when the user tries to drag it past the second thumb and vice versa.
  • 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-medium">
        <div class="sliderOuterWrap">
            <div class="title">Free thumbs interaction mode</div>
            <div class="sliderWrapper">
                <telerik:RadSlider RenderMode="Lightweight" ID="PlayBallSlider" runat="server" Width="370px" Height="70px"
                    TrackPosition="Center" IsSelectionRangeEnabled="true" SelectionStart="30" SelectionEnd="70"
                    ThumbsInteractionMode="Free" EnableServerSideRendering="true" ItemType="Tick"
                    SmallChange="5" LargeChange="10">
                </telerik:RadSlider>
            </div>
        </div>
        <hr />
        <div class="sliderOuterWrap">
            <div class="title">Lock thumbs interaction mode</div>
            <div class="sliderWrapper">
                <telerik:RadSlider RenderMode="Lightweight" ID="WoodSlider" runat="server" Width="370px" Height="70px" TrackPosition="Center"
                    IsSelectionRangeEnabled="true" SelectionStart="30" SelectionEnd="70" ThumbsInteractionMode="Lock"
                    EnableServerSideRendering="true" ItemType="Tick" SmallChange="5" LargeChange="10">
                </telerik:RadSlider>
            </div>
        </div>
        <hr />
        <div class="sliderOuterWrap last">
            <div class="title">Push thumbs interaction mode</div>
            <div class="sliderWrapper">
                <telerik:RadSlider RenderMode="Lightweight" ID="BVS" runat="server" Width="370px" Height="70px" TrackPosition="Center"
                    IsSelectionRangeEnabled="true" SelectionStart="30" SelectionEnd="70" ThumbsInteractionMode="Push"
                    EnableServerSideRendering="true" ItemType="Tick" SmallChange="5" LargeChange="10">
                </telerik:RadSlider>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?