With the help from some nice folks I have implemented a slider without anchoring in JS. The issue is that it does not work on mobile at all (no slider selector and value is displayed and there is just a grey line). I assume that it is not touch sensitive.
Does anybody know how to amend this so that it works on mobile as well?
Qualtrics.SurveyEngine.addOnload(function() {
/* Place your JavaScript here to run when the page loads */
});
Qualtrics.SurveyEngine.addOnReady(function() {
/* place your JavaScript here to run when the page is fully displayed */
var firstclick = 0;
jQuery('.handle').hide(); // Assuming '.handle' is the class of the element you want to hide
jQuery('.track').on("mouseover", function() {
jQuery(this).find(".handle").show();
if (firstclick == 0) {
jQuery(this).find(".handle").css("width", "0px");
}
});
jQuery('.track').on("click", function() {
firstclick = firstclick + 1;
jQuery(this).find(".handle").css("width", "20px");
});
});
Qualtrics.SurveyEngine.addOnUnload(function() {
/* Place your JavaScript here to run when the page loads */
});