"They are not going to care if it is a vertical or horizontal scale."
er. they do care, unfortunately, They wanted to look at our graphics. Everything else is easy in Qualtrics - pity about this not be possible at the moment.
REDCAP can do a vertical slilder.. they are happy with that.
It's possible. Use the JS library noUiSlider.
TomG
Hi Sir! Good day!
"It's possible. Use the JS library noUiSlider."
I am new to Qualtrics, may I ask on how to add JS library and what are the things I need to do, in order to replicate that scale example that you have given?
Thanks in advance
- https://www.qualtrics.com/community/discussion/comment/28929#Comment_28929Add the NoUiSlider style sheet and JS to your survey header
- Add html and css to your question to display the slider
- Add JS to your question to configure the slider and display and capture the slider value
Thanks Sir TomG !
The example that you made above, is it a Text / Graphic or a Slider question that you have override?
Currently I am testing it using a Text / Graphic, but if you are using a Slider or Graphic Slider, can you show some code snippet on how to override it?
Many thanks!
Neither. Constant sum.
Thanks for all info so far. Still struggling here!
Can anyone help ...
1. Add the NoUiSlider style sheet and JS to your survey header
Re NoUiSlider style sheet - So here I just add following code to the Look and feel/header window :
- Then, on the question itself, you'll have to add custom HTML code to get it to look right. I used a "Constant Sum" question with one choice and the horizontal orientation, but you can probably format it to be something else. Then went to edit the question text and added custom HTML. Rich Content Editor --> Source. Below is my custom HTML code. The only way I could get it to look OK was with a table.
EQ-5D VAS
| The best health you can imagine | |
| Please click on the slider to indicate how your health is TODAY | |
| The worst health you can imagine |
- With that in place, you'll then have to add the custom Javascript code on the question itself to actually make the slider work inside the
addOnLoad
function. The first part sets up the slider itself, and the second part captures its output to the answer box of the question so that it gets recorded.
Qualtrics.SurveyEngine.addOnload(function() {
TouchList.prototype.each = Array.prototype.each;
TouchList.prototype._each = Array.prototype._each;
var verticalSlider = document.getElementById('uiSlider');
noUiSlider.create(verticalSlider, {
start: 0,
orientation: 'vertical',
tooltips: wNumb({decimals: 0}),
direction: 'rtl',
step: 1,
range: {
'min': 0,
'max': 100
},
});
var inputNumber = document.getElementById('QR~'+this.questionId+'~1');
verticalSlider.noUiSlider.on('update', function (values, handle) {
var value = valueslhandle];
inputNumber.value = Math.round(value);
});
inputNumber.addEventListener('change', function () {
verticalSlider.noUiSlider.set(dnull, this.value]);
});
inputNumber.setAttribute("readonly",true)
});
It doesn't look exactly like the EQ-5D VAS demo, but gets the key elements they ask for.
Hi tiz ,
Thanks so much for posting the JS! As someone who knows nothing about it, it has been extremely helpful.
Unfortunately, I'm still unable to get the Slider up and running. Just to be clear, once your insert the HTML code for the question itself, should you be able to see the slider? For me, I can't see the slider itself, but only the two tail statements at the top and bottom. I think this is where it's going wrong for me, even though I am copy and pasting your script. Any advice would be helpful!
Thank you!
Hi everyone! I am in the same place as Ahuti (above) and cannot seem to get the slider to work. Can anyone assist me with this? Thank you in advance!
Hi all
I have tried for a while now to implement the vertical slider. The above code helped a lot, but there are a few lines of code which cause the slider not to be displayed. Here is the solution I came up with:
- Use question type "constant sum", one choice, vertical
- Link to the noUISlider code; as tiz described it (see above):
You need to add the JS code for noUISlider to the header files. Go to Look and feel --> General --> Edit Header --> Click on the "Source" symbol then add the following 2 lines in. This will get you the CSS and JS for the noUISlider library:
- The HTML for the question looks like this:
| The best health you can imagine |
| The worst health you can imagine |
- Finally, there is some JavaScript that has to go with the question:
Qualtrics.SurveyEngine.addOnload(function() {
var vSlider = document.getElementById('uiSlider');
noUiSlider.create(vSlider, {
start: 50,
step: 1,
direction: 'rtl',
orientation: 'vertical',
range: {
min: 0,
max: 100
},
format: wNumb({
decimals: 0
}),
// Show a scale with the slider
pips: {
mode: 'positions',
values: 0,10,20,30,40,50,60,70, 80,90,100],
stepped: true,
}
});
var inputNumber = document.getElementById('QR~'+this.questionId+'~1');
vSlider.noUiSlider.on('update', function (values, handle) {
inputNumber.value = values handle];
});
inputNumber.addEventListener('change', function () {
vSlider.noUiSlider.set( null, this.value]);
});
inputNumber.setAttribute('readonly',true)
});
Hi tiz bgk LauraK CTRSean Trevail GuinevereM JLow
the above latest on this post may be on interest to you - glad to say we've got it working thanks to bgk !
BW
JB
Hi everyone!
I'm still having some trouble getting the slider itself to appear. I've listed what I have so far - any advice would be appreciated!
1) Under Look and Feel | General | Edit Header | Source, I have:
2) I have listed the question I'm editing as Constant Sum, 1 Choice, Vertical.
3) Within the question I'm editing, under Rich Content Editor | Source, I have:
| The best health you can imagine |
| The worst health you can imagine |
4) Under Add JavaScript for the question, I have:
Qualtrics.SurveyEngine.addOnload(function() {
var vSlider = document.getElementById('uiSlider');
noUiSlider.create(vSlider, {
start: 50,
step: 1,
direction: 'rtl',
orientation: 'vertical',
range: {
min: 0,
max: 100
},
format: wNumb({
decimals: 0
}),
// Show a scale with the slider
pips: {
mode: 'positions',
values: 0,10,20,30,40,50,60,70, 80,90,100],
stepped: true,
}
});
var inputNumber = document.getElementById('QR~'+this.questionId+'~1');
vSlider.noUiSlider.on('update', function (values, handle) {
inputNumber.value = values handle];
});
inputNumber.addEventListener('change', function () {
vSlider.noUiSlider.set( null, this.value]);
});
inputNumber.setAttribute('readonly',true)
});
This is driving me nuts!
https://www.qualtrics.com/community/discussion/comment/34390#Comment_34390Hi ErinNP and others
Looking at your code (and mine above) I have noticed that the slider is named differently in HTML and Javascript. Please use in both places either "uiSliderX" as here:
var vSlider = document.getElementById('uiSlider');
This should hopefully solve your problem. Sorry for the typo!
bgk thanks for the reply! I tried changing the name of the slider in both locations and I'm still not seeing the slider appear. I'm wondering if the issue could be the link to the noUIslider code in the header? Any thoughts would be greatly appreciated!
ErinNP Sorry to hear that the slider is still not working for you.
You need to use "@" instead of "AT" in the header link. As in the code further up the page the link isn't displayed properly I tried to use this work-around, sorry if this wasn't clear.
bgk thanks for the reply! I tried changing the name of the slider in both locations and I'm still not seeing slider appear. I'm wondering if the issue could be the link to the noUIslider code in the header? Any thoughts would be greatly appreciated!
bgk that was the problem! Good catch. Thank you so much for your help - the slider works now!
Great thread! I tried the code myself and it did not work. I found that removing the
formatfield fixes the issue. Just posting in case this info is useful.
format: wNumb({
decimals: 0
})
Hi,
I was wondering if anyone could help me, I'm having some difficulty with the slider.
For some reason my slider starts below the slider itself, so that the '0' value is way below the beginning of the slider. 
As well as this, the 100 is below the end of the slider:
Is anyone able to help me?
Here's my code!
Javascript:
Qualtrics.SurveyEngine.addOnload(function()
{ TouchList.prototype.each = Array.prototype.each;
TouchList.prototype._each = Array.prototype._each;
var verticalSlider = document.getElementById('uiSlider');
noUiSlider.create(verticalSlider, {
start: 50,
orientation: 'vertical',
tooltips: wNumb({decimals: 0}),
direction: 'rtl',
step: 1,
range: {
'min': 0,
'max': 100
},
});
noUiSlider.create(pipsRangeVertical, {
range: range_all_sliders,
start: 0,
orientation: 'vertical',
pips: {
mode: 'range',
density: 3
}
});
var inputNumber = document.getElementById('QR~'+this.questionId+'~1');
verticalSlider.noUiSlider.on('update', function (values, handle) {
var value = valuesthandle];
start: 0,
inputNumber.value = Math.round(value);
});
inputNumber.addEventListener('change', function () {
verticalSlider.noUiSlider.set(Lnull, this.value]);
});
inputNumber.setAttribute("readonly",true)
});
HTML:
| The best health you can imagine |
| The worst health you can imagine |
Thank you in advance!
https://community.qualtrics.com/XMcommunity/discussion/comment/38979#Comment_38979Or add ">https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.2.0/wNumb.min.js"> to use wNumb
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.