Two thumbs, opposite directions.

1 posts, 0 answers
  1. Barbaros Saglamtimur
    Barbaros Saglamtimur avatar
    110 posts
    Member since:
    Jul 2012

    Posted 28 Sep 2010 Link to this post

    Requirements

    RadControls version

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

    There is no .NET language specific code
    Visual Studio version

    2010
    Programming language

    JavaScript
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    Another approach based on my previous sample. This time thumbs slide opposite directions.

        With increase/decrease buttons.
        <br />
        <br />
        <telerik:RadSlider ID="RadSlider1" runat="server" SmallChange="5" LargeChange="10"
            ItemType="tick" IsSelectionRangeEnabled="true" Width="400px" Height="60px" SelectionStart="-10"
            SelectionEnd="20" OnClientBeforeValueChange="OnClientBeforeValueChange" OnClientValueChange="OnClientValueChange"
            MaximumValue="50" MinimumValue="-50">
        </telerik:RadSlider>
        <br />
        <br />
        Without increase/decrease buttons. This is more usable.
        <br />
        <br />
        <telerik:RadSlider ID="RadSlider2" runat="server" SmallChange="5" LargeChange="10"
            ItemType="tick" IsSelectionRangeEnabled="true" Width="400px" Height="60px" SelectionStart="-10"
            SelectionEnd="20" OnClientBeforeValueChange="OnClientBeforeValueChange" OnClientValueChange="OnClientValueChange"
            MaximumValue="50" MinimumValue="-50" ShowDecreaseHandle="False" ShowIncreaseHandle="False">
        </telerik:RadSlider>
     
     
        <script type="text/javascript">
            var avoidRecusrsion = false;
            function OnClientBeforeValueChange(sender, args) {
                if (avoidRecusrsion) return;
                var newEnd = sender.get_selectionEnd();
                var newStart = sender.get_selectionStart();
                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 (newEnd >= sender.get_maximumValue() && args.get_newValue() <= args.get_oldValue()) {
                        args.set_cancel(true);
                    }
                }
                // In case we are moving the selectionEnd dragHandle.      
                else {
                    if (newStart <= sender.get_minimumValue() && args.get_newValue() >= args.get_oldValue()) {
                        args.set_cancel(true);
                    }
                }
                avoidRecusrsion = false;
            }

            function OnClientValueChange(sender, args) {
                if (avoidRecusrsion) return;

                var newValue = args.get_newValue();
                var oldValue = args.get_oldValue();
                var difference = (newValue - oldValue) * -1;
                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 = sender.get_selectionEnd() + difference;
                    sender.set_selectionEnd(rangeEnd);
                }
                // In case we are moving the selectionEnd dragHandle.      
                else {
                    var rangeStart = sender.get_selectionStart() + difference;
                    sender.set_selectionStart(rangeStart);
                }
                avoidRecusrsion = false;
            }
        </script>
Back to Top