uiSlider - Values and image of the slider are misaligned

I'm trying to implement a Qualtrics survey, where I want to have an image of a ladder and a vertical slider next to it (where participants can set where they're on the ladder). The values on the slider run from 1 to 10, but the handle cannot be set to 10, but can be set to 0 (which is graphically under the slider itself). Furthermore, if I set 4 on the slider, it interprets it as 5 (similarly, if I set 0, it thinks it's 1, and so on). Do you know what am I doing wrong? I'm attaching the JS and the HTML scripts. I would be tremendously grateful if anyone could help! Thanks in advance

Here is the screenshot of the handle being under the slider

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/
    
var vSlider = document.getElementById('uiSlider');
  noUiSlider.create(vSlider, 
                    {
      start: 5,
      step: 1,
      direction: 'rtl',
      orientation: 'vertical',
      range: {
          min: 1,
          max: 10
      },
      format: wNumb(
          {
          decimals: 0
      }
                   ),
  // Show a scale with the slider
 pips: {
     mode: 'steps',
     stepped: true,
     density: 10,
    }
  }
                   );
 
  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)
    }
                                );

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});

<table style="width:100%">
 <tbody>
  <tr>
   <td style="padding-right:10px; width:65%; vertical-align: top;" rowspan="3"><img style="width: 600px; height: auto;" src="https://www.researchgate.net/profile/Paul-Vaucher/publication/259879628/figure/fig3/AS:341740713201697@1458488743795/MacArthur-scale-of-subjective-social-status-It-is-used-to-assess-patient-and-doctor.png"></td>
  </tr>
  
  <tr>
   <td style="padding-left:30px;">
     <div style="height:375px;" id="uiSlider">&nbsp;</div>
   </td>
  </tr>
 </tbody>
</table>

Solution

Try to add this:

inputNumber.addEventListener('change', function () {
        vSlider.noUiSlider.set(values[handle]);
    }

Instead of this:

inputNumber.addEventListener('change', function () {
    vSlider.noUiSlider.set([softSlider.noUiSlider.set]);
}

It will help you to reach number "10".

And about the number "0", actually it not "0" it is "1" in your scale. If you will take a look closer, so when you are setting "7", actually your handle is under the 7th mark, same if you are setting 10, handle is under 10th mark. So position of the handle, which you consider as "0" is actually a "1" in the design you have chosen.

Hovewer, you can override this behaviour, by adding those lines:

var override = document.getElementsByClassName('noUi-base')[0];
override.style.position = "initial"

Below the code where the slider is created.

noUiSlider.create(vSlider, 
                    {
      start: 5,
      step: 1,
      direction: 'rtl',
      orientation: 'vertical',
      range: {
          min: 1,
          max: 10
      },
      format: wNumb(
          {
          decimals: 0
      }
                   ),
  // Show a scale with the slider
 pips: {
     mode: 'steps',
     stepped: true,
     density: 10,
    }
  }
                   );