Slider Question: How to hide the handle until the participant clicks on the track? | XM Community
Skip to main content
Hi community



I know this question came up before in the following threads: https://www.qualtrics.com/community/discussion/1452/showing-slider-handle-on-first-click and https://www.qualtrics.com/community/discussion/486/how-can-i-hide-the-anchor-on-a-sliding-scale-question.

However, the fixes proposed in those threads did not help me fix my problem.



When the question appears I need the participant to see the track, and then, when clicking on the track I need the handle to appear where the participant clicked. My coding abilities are limited to copy/paste and sometimes understanding parts of a code. Could someone help me out with this problem?



I tried the codes suggested in the other two threads, but the closed I arrived is to have a hidden track and handle (only visible when doing a mouseover), and the handle appearing on the left when clicking on the track. But that is not really what I need.



Thank you very much for every clue you could give me 😀
Hi @jaegtiz

try this code

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

q.find(".handle").css('visibility', 'hidden');

q.find(".track").on("click", function() {

jQuery(this).find(".handle").css('visibility', 'visible');

});
Hi @NiC, thank you a lot! That was exactly what I needed!
@NiC I have a connecting question, which hopefully is easy to resolve:

The code does work when the page is loaded, however, while loading the page the handle is still showing for a few milliseconds.

I already tried to put the code in all the three sections (addOnload, addOnUnload and addOnReady), but this did not resolve the issue.

Is it possible to avoid the showing of the handle while loading the page?
Hello @jaegtiz ,



Paste the following code in the Look and feel -> Advanced -> Add custom CSS



.handle{

visibility:hidden

}
Thank you very much! Now it works 😀
@NiC I have tried pasting the JS you provided, and it is not working for my slider question. The slider is still visible when the question loads. Do you have any suggestions?
Here is the updated code to work on mobile devices too:



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

q.find(".handle").css('visibility', 'hidden');

q.find(".track").on("click , touchstart", function() {

jQuery(this).find(".handle").css('visibility', 'visible');

});

I am currently using this code and it does show the slider for a few milliseconds, how was this resolved for jaegtiz? NiC

Hi all -
Is there a way to modify this code so that it works for questions with required response? Currently, if a respondent tries to skip the question, and an error message appears, then the slider handle disappears on answered questions... Is there a way to keep the handle where it was for the answered questions?
Thank you.

Leave a Reply


Terms & Conditions