How can I create a generalized labeled magnitude slider rating scale using the custom code? | XM Community
Skip to main content

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?
GLM Perception scale.png

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:


 
 
  
  
 
 
  
 
 
  
 
 

  

      
  • We would like to know how good or bad your health is TODAY.

  •   
  • This scale is numbered from 0 to 100. 

  •   
  • 100 means the best health you can imagine.

      0 means the worst health you can imagine.

  •   
  • Please mark an X on the scale to indicate how your health is TODAY.

  •   
  • Now, write the number you marked on the scale in the box below.

  •   

  
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