fix #414: when multiple thumbs are being touched at the same time, set the current thumb to the closest of the touch event

[Neiso]

#404
First ever PR in public repo, please be kind.

Run into this issue recently and since it's a must have in my project, I decided to dig a little bit into it. The problem in general was the way the lib detects when a thumb is being touched or not. If more than 1 thumb are being touched, it will only set the current one to the first being touched, being the earliest in the values array.

        // line 510
        // => check if a thumb is hit by iterating through the values array. Find returns the first one.
        const hitThumb = values.find((_, i) => { 
            ...
            // check if thumb contains point 
            ...
            // set the active thumb
            if (containsPoint) {
                this._activeThumbIndex = i;
            }
            // return true. Does not check for other thumb
            return containsPoint;
        });

So the first fix is to make an array hitThumbs to get which ones are being touched. For each thumb, we get either the distance to the touch or false. Then if at least one of the thumbs is being touched, we make an array of the distance to touch and for the false value, we assign a dummy value (props.maximumValue) and we use indexOfLowest to get the closest thumb from the touch. This thumb is the one that should be dragged

I updated the trackDistanceToPoint to get the absolute distance from the center of the thumb.

Let me know if you have any questions!

Simulator.Screen.Recording.-.14.pro.demo.uti.-.2023-10-04.at.21.40.07.mp4