How to add NoUISlider to Qualtrics Survey? | XM Community
Skip to main content

I am presently trying to add a custom slider to one of my surveys. I specifically want to use the NoUISlider module:

 

Unfortunately, I am having almost no luck with getting this module to work as intended in Qualtrics.

Although I have a working understanding of JavaScript, CSS, and HTML… I am not certain I understand its application in a Qualtrics environment. And specifically, where certain relevant chunks of code should be.

 

So let’s try getting the basic module to work:

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
start: 20, 80],
connect: true,
range: {
'min': 0,
'max': 100
}
})

 

If I insert this into my question ‘addOnLoad’ like so

 

And then append the HTML to the question body like so:

 

Absolutely nothing appears:

 

 

Note, I have also tried navigating to ‘LOOK AND FEEL → GENERAL → HEADER’ and append the script there, like so:

 

I also do not get the slider to appear.

I have also tried executing the code under the ‘Installation’ section for noUiSlider within the Qualtrics header with little luck.

What am I getting wrong here? Specifically if I wanted to run a study with X questions each having the same style of customized slider.

Feel free to explain it to me like I am 5. I might be missing something very basic and silly. I am certain that once I get the module actually working I will have a much easier time customizing it. I was able to follow most of the other topics about implementing noUiSlider easily enough- I just find myself failing to get my first attempt at custom Javascript running in Qualtrics.

Make sure you have added the NoUISlider JS script and CSS link tag CDN in the survey header.


Make sure you have added the NoUISlider JS script and CSS link tag CDN in the survey header.

This is what I was missing. Thanks so much :)


Leave a Reply