Interacting with the GPU
As the 2D slider has to interact with the GPU the expected output is an array with 2 elements, in the range [-1.0, 1.0], with no adjustment applied evaluating to 0.0.
But looking at the components the only value I have is the position of the cursor, and the client rect of the container.
In a 1D slider html output the desired value range. However reverse engineering it isn’t too difficult.
Let’s consider the slider handle at the very start of a slider, it’ll output 0, and at the very end of the slider it’ll output 1.
Assuming that the slider is at the very left-top of the page, and 100 pixels wide, the handle position goes from 0 to 100 px.
In two dimensions that’s (0, 0) -> (100, 0).
So to get the slider value I can normalize the handle position by dividing it by the width of the slider (100 in this case).
To get the output in the range [-1.0, 1.0], I can multiply the range by 2 and subtract 1. Now I gotta expand that slider to 2-dimensions.