It works fine if only one joystick is in use but as both joysticks are in use, it works weirdly (values of both joysticks get mixed up).
i m using pc.ElementDragHelper for this.
Here is the link to the project that demonstrates my issue.
https://playcanvas.com/project/946388/overview/joysticks
Hi @gameBole and welcome,
I didn’t have the chance to look at your project, but in case it’s of help here is an example that uses two touch joysticks:
https://developer.playcanvas.com/en/tutorials/first-person-shooter-starter-kit
Thank you @Mason_Rocchio 
It gets confused because the controller cant distinguishes between the values of both joysticks, so it’s like giving 2 values to both joysticks.
If you run the project on android and use both joysticks, you will know what I mean as it is kinda tricky to explain.
I had a quick look at pc. ElementDragHelper and it is designed to use the most recent change touch. It doesn’t take into account of the touch id when moving elements.
Even with one joystick and using both thumbs, the joystick doesn’t behave correctly.
You would to write your own ‘draghelper’ to do this at the moment
Thanks for the info @yaustar ,
I m now shifting my left joystick to the logic that is used in the project above by @Leonidas , while keeping my right joystick the same (using pc.ElementDragHelper). I think it will do the task.
Thanks for your time and information.
Cheers
Created a bug for this as it affects existing UI components too:
@Leonidas can you pls look at the project that you provide link below, there are no boundaries for joystick base, you can drag on any part of the screen, I have been trying to resolve this issue but so far I limited the X-axis, but on Y axis the issue is still. I m making changes in virtualJoyStick Script where I am getting the XY axis value.