Slider without anchoring. Handle appearing on click | Experience Community
Skip to main content
Solved

Slider without anchoring. Handle appearing on click

  • May 1, 2024
  • 3 replies
  • 103 views
M
Forum|alt.badge.img+1

Hi there!

 

I want to implement a slider without showing the handle until the handle bar is clicked on to prevent any anchoring. Based on several posts this seems to work just fine. However, I do get it to work.
 

Any ideas why?

 

 

Thanks a lot!

Best answer by RickB

Hey @m_schneider 

mabey it will work with this change

 

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

 

3 replies

RickB
Level 4 ●●●●
Forum|alt.badge.img+22
  • RickB
  • Level 4 ●●●●
  • Answer
  • May 1, 2024

Hey @m_schneider 

mabey it will work with this change

 

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

 

M
Forum|alt.badge.img+1

You are a champ! Works like a charm :)

    M
    Forum|alt.badge.img+1

     @RickB Sorry but do you know how to adapt this that it also works on mobile? I only see a grey bar there and no indicator of the slider ball/number it is pulled to. Would help a lot!

     

    Terms & ConditionsAccessibility statement