Showing Slider Handle on First Click

Thanks to @TomG, I've managed to get the handle on a slider in my survey to be hidden until the respondent clicks anywhere on the track of the slider itself, with the below:

`var q = jQuery("#"+this.questionId);

q.find(".handle").hide();
q.find(".track").on("click", function() {
jQuery(this).find(".handle").show();
});`

While this works great to ensure there is no visual "default" on a slider to anchor the respondent, once the track of the slider is clicked, the handle of the slider shows up on the very left of the slider, so the respondent has to click again to where they initially clicked on the slider (assuming that's where they wanted to place the handle) and then that sort of already becomes the default. So we'd like to go an extra step and have the handle of the slider show up wherever the respondent has first clicked on the track.

The approach I've taken thus far has been to try different methods that get the position of the mouse on the page when the respondent clicks on the track. So to the event listener above for the click on the slider's track, I'd ideally like to add something that would capture where on the page the mouse is when that click is made. Ideally, then, I could get the x-coordinate of the mouse position, and adjusting for where on the page the slider is actually located, make the handle of the slider show up in the specified "width" of the track with the width() function (if necessary, I could convert the desired width to the corresponding value on the slider with the val() function; for example, if the track of the slider is 780px wide, and I get that the mouse position is such that the person clicked 390px left from the beginning of the track, I'd simply convert that to the value of the slider being 50, and as such add something like `jQuery(".ResultsInput").val(50);` (or whichever value would correspond) to the event listener).

Is there a particular method or function that actually works best (or works at all) to do this in Qualtrics (i.e. to get the position of the mouse when there's a click somewhere on the page)? Or is my current approach completely infeasible to have the handle of the slider show up on the respondent's first click on the slider?

I've considered or tried the suggestion here (https://www.kirupa.com/html5/getting_mouse_click_position.htm), the clientX property, the functions used here (http://math.bu.edu/people/jackwalt/qualtrics-mousetracking/#), something like `getPointerInfo().getLocation() - yourComponent.getLocationOnScreen()`, etc. and not sure that any of them are really working?