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.