rilti.js | a small opinionated future forward front-end framework | Application Framework library

The element containing a draggable or moveable handle can only start from the top left position, I have no idea how to adjust, calculate or correct the pixel values to make the draggable handle element start from say the bottom left like a normal graph would.

The position of the handle is used to generate a range restricted value like a percentage value between 0-100 for both the x and y axis regardless of the element's pixel size.

It's a range-input or position picker of sorts intended for use in a color picker widget.
The color gradients change depending on the widget's relative position to the left, top or right of something, hence the picker or handle should adjust the starting point of it's range accordingly.

I'm using onpointermove to get the x and y positions of the div.handle and adjust for the relative width, height, left and top, offsets of the parent element.

What I cannot figure out for the life of me is the math and code needed to allow the range input to track the position from an arbitrary corner, preferably bottom left.

Sorry for using a custom library but this example is mostly vanilla, at least the calculations which matter are.