Integrating a jQuery slider doesn't work | XM Community
Question

Integrating a jQuery slider doesn't work

  • 4 December 2019
  • 1 reply
  • 45 views

Hi everyone!

I'd like to integrate a Slider into my survey from a jQuery library (this one - https://xdsoft.net/jqplugins/range2dslider), but it doesn't seem to work. As I understand jQuery is included in Qualtrics, so there's no need to call it in the header.

This is the code I'm putting inside the "add JS" window:

jQuery('#slider').range2DSlider({
template:'horizontal',
value:[[5,0],[7,0]],
onlyGridPoint:true,
round:true,
axis:[[-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10]]
});

Any ideas would be very much appreciated!

Thanks!

1 reply

Userlevel 7
Badge +27

Hi there, if you still need, you will have to include the plugin in the Header of the survey. To give this a try, first add the below to the Header of the survey:


Next, head to the Survey Flow and create Embedded Data fields to capture the values in the slider labels. At the top of the Survey Flow, create the Embedded Data fields of "slider1val1" and "slider1val2".
Once the Survey Flow is set, head over to the Builder and create a Text/Graphic question. Using the Rich Content Editor's HTML/Source view "<>", update the Question Text with the below:


Finally, update the question's JavaScript with the below:
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*/

jQuery('#slider1').range2DSlider({
template:'horizontal',
value:[[5,0],[7,0]],
onlyGridPoint:true,
round:true,
axis:[[-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10]]
});

jQuery("#"+this.questionId+" .QuestionText").css({"padding-top":"50px"});

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});


Qualtrics.SurveyEngine.addOnPageSubmit(function(type)   
{
/*Place your JavaScript here to run when the page is unloaded*/

var label = document.getElementsByClassName('xdsoft_slider_label');
var slider1label1 = label[0];
var slider1label2 = label[1];
var slider1val1 = jQuery(slider1label1).text();
var slider1val2 = jQuery(slider1label2).text();

Qualtrics.SurveyEngine.setEmbeddedData("slider1val1", slider1val1);
Qualtrics.SurveyEngine.setEmbeddedData("slider1val2", slider1val2);

});
2Dslider.png

Leave a Reply