Two thumbs fixed range slider

Thread is closed for posting
3 posts, 0 answers
  1. AF879573-C93C-44CE-85EC-E384C9A19A99
    AF879573-C93C-44CE-85EC-E384C9A19A99 avatar
    110 posts
    Member since:
    Jul 2012

    Posted 23 Sep 2010 Link to this post

    Requirements
    RadControls version

    Written using Q2 2010, but it could be used using older versions
    .NET version

    Written using 4.0, but there is no .NET language specific code
    Visual Studio version

    2010
    programming language JavaScript
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    I had a specific need for two thumbs fixed range slider. When any of the thumbs slides other one must slide same way with the range remained. A CheckBox will enable this behavior.

    Any improvements are welcome.

    <script language="javascript" type="text/javascript">
        var gap;
        var newValue;
        var oldValue;
        function OnClientLoad(sender, args) {
            gap = sender.get_selectionEnd() - sender.get_selectionStart();
        }
        function OnClientValueChanged(sender, args) {
            newValue = args.get_newValue();
        }
        function OnClientSlide(sender, args) {
            if ($get("<%= CheckBox1.ClientID %>").checked) {
                var isFirstHandleActive = GetActiveDragHandle(sender);
                if (oldValue != newValue) {
                    if (isFirstHandleActive) {
                        sender.set_selectionEnd(newValue + gap);
                    }
                    else {
                        sender.set_selectionStart(newValue - gap);
                    }
                    oldValue = newValue;
                }
            }
        }
        function OnClientSlideEnd(sender, args) {
            gap = sender.get_selectionEnd() - sender.get_selectionStart();
        }
        function GetActiveDragHandle(slider) {
            var dragHandles = slider.get_dragHandles();
            var activeDragHandle = slider.get_activeHandle();
            if (activeDragHandle == dragHandles[0]) return true;
            return false;
        }
    </script>
        <telerik:RadSlider ID="RadSlider1" runat="server" SelectionStart="20"
            SelectionEnd="30" Width="368px" IsSelectionRangeEnabled="true" OnClientLoad="OnClientLoad"
        OnClientValueChanged="OnClientValueChanged" OnClientSlide="OnClientSlide"
            onclientslideend="OnClientSlideEnd">
        </telerik:RadSlider>
        <br />
        <asp:CheckBox ID="CheckBox1" runat="server" Text="Enable fixed range" Checked="true" />

    This functionality may be added to further releases as a new thumbs interaction mode, may be called "Fixed Range".
  3. 08B6ED4A-A42D-4860-8FB3-95B84B4A414F
    08B6ED4A-A42D-4860-8FB3-95B84B4A414F avatar
    1517 posts
    Member since:
    Nov 2017

    Posted 24 Sep 2010 Link to this post

    Hello Barbaros Saglamtimur,
    Great idea for a code library. There is one thing that I noticed in your solution though. You have not handled the click on the track and the click on the increase/decrease buttons of the slider. That is why, you solution keeps the original range only in case you are dragging a dragHandle/thumb. I have attached another solution that handles all three cases - dragging of a dragHandle/thumb, clicking on the track and clicking on the increase/decrease buttons.

    Regards,
    Tsvetie
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. AF879573-C93C-44CE-85EC-E384C9A19A99
    AF879573-C93C-44CE-85EC-E384C9A19A99 avatar
    110 posts
    Member since:
    Jul 2012

    Posted 28 Sep 2010 Link to this post

    That's perfect. I wasn't aware of "OnClientBeforeValueChange".
    Here is my final cut with checkbox enabled fixed range behavior.
         <script type="text/javascript">
             var avoidRecusrsion = false;
             var rangeBetweenHandles;
             function OnClientBeforeValueChange(sender, args) {
                 if ($get("<%= CheckBox1.ClientID %>").checked) {
                     rangeBetweenHandles = sender.get_selectionEnd() - sender.get_selectionStart();
                     if (avoidRecusrsion) return;
                     var newValue = args.get_newValue();
     
                     var sliderDragHandles = sender.get_dragHandles();
                     var activeDragHandle = sender.get_activeHandle();
     
                     if (!activeDragHandle) return;
     
                     avoidRecusrsion = true;
                     // In case we are moving the selectionStart dragHandle.     
                     if (activeDragHandle == sliderDragHandles[0]) {
                         if (newValue + rangeBetweenHandles > sender.get_maximumValue()) {
                             args.set_cancel(true);
                         }
                     }
                     // In case we are moving the selectionEnd dragHandle.     
                     else {
                         if (newValue - rangeBetweenHandles < sender.get_minimumValue()) {
                             args.set_cancel(true);
                         }
                     }
                     avoidRecusrsion = false;
                 }
             }
     
             function OnClientValueChange(sender, args) {
                 if ($get("<%= CheckBox1.ClientID %>").checked) {
                     if (avoidRecusrsion) return;
                     var newValue = args.get_newValue();
     
                     var sliderDragHandles = sender.get_dragHandles();
                     var activeDragHandle = sender.get_activeHandle();
     
                     if (!activeDragHandle) return;
     
                     avoidRecusrsion = true;
                     // In case we are moving the selectionStart dragHandle.                
                     if (activeDragHandle == sliderDragHandles[0]) {
                         var rangeEnd = newValue + rangeBetweenHandles;
                         sender.set_selectionEnd(rangeEnd);
                     }
                     // In case we are moving the selectionEnd dragHandle.     
                     else {
                         var rangeStart = newValue - rangeBetweenHandles;
                         sender.set_selectionStart(rangeStart);
                     }
                     avoidRecusrsion = false;
                 }
             }
     
        </script> 
        <telerik:RadSlider ID="RadSlider1" runat="server" SmallChange="5" LargeChange="10" ItemType="tick"
            IsSelectionRangeEnabled="true" Width="400px" Height="60px" TrackPosition="BottomRight"
            SelectionStart="0" SelectionEnd="30" OnClientBeforeValueChange="OnClientBeforeValueChange"
            OnClientValueChange="OnClientValueChange">
        </telerik:RadSlider>
        <br />
    <asp:CheckBox ID="CheckBox1" runat="server" Text="Enable fixed range" Checked="true" />

    Thanks for your help and Telerik Points.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.