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

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

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

Support & Learning Resources

Find Assistance