on overlapping handles, move the correct one based on whether dragged towards left or right

[gaurav5430]

I have a slider with 2 handles . When these handles overlap, the last one moved is the selected handle, for example if the last touched was handle2 and i try to move left from the overlapped position, it won't move, and if last touched was handle1 and i try to move right from the overlapped position, it wouldn't move.

As a user, i can't distinguish between the 2 handles when overlapped, my expectation is that when i try to move left, the correct handle is selected and moved left, and same for right... is there a way to do this ?

[emadera]

No, unfortunately. One of the restrictions of the slider is that handles must remain in a fixed linear order. The leftmost handle, for example, can never be moved to a position to the right of any other handle.

Handle selection occurs when the click begins (mouseDown). When the user stacks handles on top of one another, it becomes impossible to tell which handle they're trying to select at that time. Each handle is assigned a z-index to account for this, so that the leftmost handle will be on top when stacked. (Unless they're stacked close to the slider's left edge, in which case the rightmost handle will have the higher z-index).

This means that you can only select and move the left handle (or if you're at the left edge, the right handle) when they're stacked, and since you can't move it past the right handle, you can only move it left.

The slider does not have support for waiting until the user starts dragging to try to guess what handle they were trying to move, so unfortunately, no, there is no way to do what you're trying to do. Not without rewriting the handle selection code and the mouse events code, anyway.

[gaurav5430]

My requirement was for a 2 handle horizontal slider, this is what i ended up doing, it is not perfect but works for my requirement :

if(dragging === true)
{
       if (oldX < event.pageX) {
	    xDirection = "right";
       } else {
	   xDirection = "left";
      }
					
      oldX = event.pageX;
     //check if x coordinate is equal to the next handle, in which case, startHandleDrag for that
     if(xDirection === "right" && cur_handle+1 < scope.num_handles && scope.handles[cur_handle].left >= scope.handles[cur_handle+1].left){
		scope.startHandleDrag(cur_handle+1);
     }

    //check if x coordinate is equal to the previous handle, in which case, startHandleDrag for that
    else if(xDirection == "left" && cur_handle - 1 >= 0 && scope.handles[cur_handle].left <= 
scope.handles[cur_handle-1].left){
       scope.startHandleDrag(cur_handle-1);
    }

     else{
	    continueHandleDrag(event);
    }
}

I could not directly do it with code outside the library though.