Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Ed Beaty
390
Overlapping XamSliderNumericThumbs - activate based on mouse direction?
posted

I have a slider with two thumbs, call them High and Low. 

[----------L----------H-------]

The High thumb can never be slid to the left of the Low thumb, and the Low thumb can never be slid to the right of the High thumb.  However, the two thumbs CAN have the same value, so you can drag the High thumb on top of the Low thumb, or vice versa; their thumbs will overlap. 

[----------#-----------------]  

I would like the behavior where, if the thumbs are overlapping, clicking the thumb and moving the mouse left will cause the Low thumb to move, while clicking the thumb and moving the mouse right will cause the High thumb to move. The other thumb would remaing at the same position.

[--------#>>>H--------------]  or [--------L<<<#------------]

Currently, when the user clicks on the pair of thumb , only the topmost thumb gets activated (in my particular case, the Low thumb).  To move the High thumb, the user has to move the Low thumb out of the way, then drag the High thumb.

Is there a way to determine whether the thumbs are stacked on top of the mouse click, and then activate/drag one or the other based on how the mouse is moved?

Parents
No Data
Reply
  • 34810
    Offline posted

    Hello Ed,

    Thank you for your post.

    Currently, if you slide a thumb over another thumb and then try to slide one of them, the one that will slide will always be the one that was "moved over" the other one, as that one will be on top of the other one. I am unsure how you would pass the currently dragging slider based on a mouse move, so to achieve your requirement, I would recommend that you implement a third, initially hidden thumb.

    This third thumb will only become visible when the other two thumbs' values are equal. I would recommend handling the DragCompleted event on each of these thumbs for the following, and you will also want to handle the ValueChanged event on the initially hidden thumb as well. In the DragCompleted event for the two initially visible thumbs, I would recommend checking the value of the one that was just dragged (the sender of the event), and the other initially visible thumb. If they are equal, hide them and make the invisible thumb visible at the value of the two, now hidden thumbs. You will also want to make the initially visible thumbs have an interaction mode of SliderThumbInteractionMode.Free at this point, or the third thumb will not be able to move.

    On the third thumb's ValueChanged event, I would recommend setting the other two thumbs to be visible again, since they will appear as one thumb because they are on the same value point. In the DragCompleted event for the third thumb, you will want to check the value of the third thumb to see if it is higher or lower than the value of the other two, initially visible thumbs. If it is higher, move the high thumb to that value and hide the third thumb. Vice versa for if it is lower. Then, set the InteractionModes of the thumbs back to SliderThumbInteractionMode.Lock so they can't move past each other again.

    I have attached a sample application to demonstrate the above.

    Please let me know if you have any other questions or concerns on this matter.

    Sincerely,
    Andrew
    Associate Developer
    Infragistics Inc.
    www.infragistics.com/support

    XamSliderOverlapThumbCase.zip
Children