Two dynamically interactive sliders | Experience Community
Skip to main content
Question

Two dynamically interactive sliders

  • May 20, 2022
  • 3 replies
  • 221 views
B
Forum|alt.badge.img+1

Hi Everyone,
What I want to do is have two sliders which interact with each other to always equal a maximum e.g. when one is at 7 the other automatically gets set to 3 and vice versa.
The code I have at the moment is:
Qualtrics.SurveyEngine.addOnReady(function()

{
var currentQID = this.questionId
  jQuery("#" + currentQID + "~1~track.track." + currentQID +"-1-track").mouseup(function() {

  var slid1 = parseInt(jQuery("#" + currentQID +" input.ResultsInput").eq(1).val());
jQuery("#" + currentQID +" input.ResultsInput").eq(2).val(10-slid1);
});
 
jQuery("#" + currentQID + "~2~track.track." + currentQID +"-2-track").mouseup(function() {
var slid2 = parseInt(jQuery("#" + currentQID +" input.ResultsInput").eq(2).val());
jQuery("#" + currentQID +" input.ResultsInput").eq(1).val(10-slid2);
});


});
And the problem I have is that the mouseup function does not pick up on the ID I have put in. I should preface that I'm a noob (or Qubie) at coding so please be kind and explain in detail where I have gone wrong.
Thanks in advance for any help
Nathan

    3 replies

    bgooldfed
    Level 4 ●●●●
    Forum|alt.badge.img+25
    • bgooldfed
    • Level 4 ●●●●
    • May 23, 2022

    Hi Btech.
    This was an interesting one. I had a look and noticed two things:

    1. You'll probably want to select the handle element rather than track. Handle refers to the actual round sliding part, whereas track refers to the actual bar that it slides along. Even if you click on the track, the handle element snaps to where the cursor is, so your mouseup function will still fire correctly.

    2. The tilde character (~) shouldn't be used in ID or class names, as it's actually a CSS selector. Why the Qualtrics devs have decided to do this, I am not sure. In any case, you'll to use what's called an "escape character" (in the case of javascript, a backslash "\\") to get the script to read it as an actual character rather than a selector.

    So try putting this in your code instead:
     jQuery("#" + currentQID + "\\\\~1\\\\~handle").mouseup(function() {
    //function goes here
    };
    You are going to run into another problem though - when a user moves their mouse off of the slider while still holding down the mouse button. When they release it, they are no longer hovering over handle, so the mouseup event will not fire. This article may help you solve this problem :)
    Good luck!

    B
    Forum|alt.badge.img+1
    • Btech
    • Author
    • May 23, 2022

    Hi bgooldfed
    Thank you very much for your help and the code you supplied, it helped Qualtrics recognise, and run the code, however, you was also right about it not working all of the time.
    The article you referenced was insightful, however, I was unable to make it work for my code.
    Unfortunately I'm on holiday now for a week so won't be able to play with it until my return, but I wanted to reply before I left to you to say thank you for your time and help.

      bgooldfed
      Level 4 ●●●●
      Forum|alt.badge.img+25
      • bgooldfed
      • Level 4 ●●●●
      • May 24, 2022

      No problem, enjoy your holiday and I know you'll figure it out! Returning after a bit of time off always helps with code :)

      Terms & ConditionsAccessibility statement