Solved
Slider Question: How to hide the handle until the participant clicks on the track?
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 😀
Best answer by NiC
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');
});
+27Hi @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');
});
@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
}
+1@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');
});
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.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.