How to use a verical slider? | XM Community

How to use a verical slider?

  • 2 March 2022
  • 5 replies

Badge +1

Hi all,
I tried using the answers from this thread: , but can't seem to implement it correctly - the slider just won't show.

Do you have other advice/solutions? Maybe a different code/a modification to the one suggested in the attached thread?


5 replies

Userlevel 7
Badge +27

Hi there, I was able to make it through that thread and get the slider to display. The last comments by bgk were necessary for me to get it working. Attached is a QSF with the noUiSlider working.

Badge +2

Hi @Tom_1842 , I was so excited to see someone attached the QSF, but when I click on it, it just reloads the page, do you think you could re upload the QSF?

Userlevel 7
Badge +27

@MichelleM123 Sure thing!

Userlevel 1
Badge +5

@MichelleM123 Sure thing!

Hi Tom, Is there a way to have the slider display a blank value until it has been clicked rather than starting at 50?

Userlevel 7
Badge +27

@cturtle The 50 value can be blanked out by setting the Constant Sum field to ‘’ after the value is updated to 50 by the noUiSlider updating function. Also, you might want to have the noUiSlider handle not display until the track is interacted with so I added some code for that in the OnReady section. Below is the full JS for 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,

//update constant sum answer choice
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]);

//blank initial value


/*Place your JavaScript here to run when the page is fully displayed*/

//hide handle until slider interacted
jQuery("#"+this.questionId+" #uiSlider > div.noUi-base > div.noUi-origin > div").attr("id","handle");
var handle = document.getElementById('handle');
var track = document.getElementById('uiSlider');
var clicked ="no";

jQuery(handle).css('visibility', 'hidden');

jQuery(track).on("click , touchstart", function() {
clicked = "yes";

jQuery(track).on("click , touchstart", function() {
if(clicked == "yes"){
jQuery(handle).css('visibility', 'visible');


/*Place your JavaScript here to run when the page is unloaded*/



Leave a Reply