How can I create a generalized labeled magnitude slider rating scale using the custom code?

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: [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)
});

and this is my HTML code:

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!