Showing Slider Handle on First Click

Question

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?

TomG · Accepted Answer

Not exactly what you want, but an easy to implement improvement until you figure it out...show the handle on mouseover instead of click.  Then the first click will move the handle to where they click.

DRRTGCC · Answer

Actually, thanks for the inspiration @TomG! By just changing the event to be a mouseover instead of click, and defining a couple of variables to keep track of when the first click on the slider has been made, I've been essentially able to "hide" the handle on the slider and make it "visible" to the respondent where they first clicked (even though it's already been activated in the background when they first hovered over anywhere in the slider). For anyone curious:`var firstclick=0;q.find(".handle").hide();q.find(".track").on("mouseover", function() {jQuery(this).find(".handle").show();if (firstclick==0) {jQuery(this).find(".handle").css("width", "0px");};});q.find(".track").on("click", function() {firstclick=firstclick+1;jQuery(this).find(".handle").css("width", "20px");});`

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded