Custom JS code (slider without anchoring) does not work on mobile

Question

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 */
});

Best answer by Deepak

@m_schneider

try below code

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 touchend touchstart", function() {
        jQuery(this).find(".handle").show();
        if (firstclick == 0) {
            jQuery(this).find(".handle").css("width", "0px");
        }
    });

    jQuery('.track').on("click touchend touchstart", function() {
        firstclick = firstclick + 1;
        jQuery(this).find(".handle").css("width", "20px");
    });
});

Deepak · Accepted Answer

@m_schneidertry below codeQualtrics.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 touchend touchstart", function() {        jQuery(this).find(".handle").show();        if (firstclick == 0) {            jQuery(this).find(".handle").css("width", "0px");        }    });    jQuery('.track').on("click touchend touchstart", function() {        firstclick = firstclick + 1;        jQuery(this).find(".handle").css("width", "20px");    });});

m_schneider · Answer

Thank you so much! That was very helpful :)

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded