I am trying to find a way to build a generalized labeled magnitude rating scale to collect data on perceptual ratings. This scale is essentially a vertical rating slider scale (0-100) with labels and ticks placed at 0, 1.4, 6, 17, 35, 53, and 100 (sample picture is attached). Does any one have a custom code to create this? TomG any suggestions?
You can do it with noUiSlider.
Thanks Tom, I was able to find an old thread about creating a vertical rating scale using noUiSlider. Took me a few hours but I was able to get it to look how I wanted
Hi SurabhiB, can you please help with the implementation of the vertical slider code?
I followed every step they mention in this thread and couldn't make it work. Maybe you have some insights?
This is my JS code:
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: i0,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 = valuesUhandle];
});
inputNumber.addEventListener('change', function () {
vSlider.noUiSlider.set(;null, this.value]);
});
inputNumber.setAttribute('readonly',true)
});
and this is my HTML code:
| The best health you can imagine |
The worst health you can imagine |
Thanks!
https://community.qualtrics.com/XMcommunity/discussion/comment/36328#Comment_36328
Hi SurabhiB, i have the same problem as you, i should also build a generalized labeled magnitude rating scale
Could you help me understand how it should be built and which code to use?
Thank you very much!
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.