Position Labels to the Left and Right Side of the Slider | XM Community
Question

Position Labels to the Left and Right Side of the Slider

  • 5 February 2021
  • 1 reply
  • 479 views

Hello,
I need to create a slider scale that shows extreme values ​​on each side of the slider rather than the top of it, as shown in the image that labels "Poor" and "Excellent" are on both sides of the slider. I would appreciate it if you could let me know how can I do it?
 
 
slider1.jpg


1 reply

Userlevel 7
Badge +27

Hi there, if you still need, this can be put in place by creating a Constant Sum question type and setting the answer type to Sliders. Then, add the below to the OnReady of the question's JavaScript, updating the "Choice" text with what the right side of the slider should display. This is set up for 3 sliders, but configuring it for more would just be adding more end and container vars.
var qid = this.questionId;
var end1 = document.getElementById(qid+'~1~result');
var cont1 = document.getElementById(qid+'~1~ResultsTd');
var end2 = document.getElementById(qid+'~2~result');
var cont2 = document.getElementById(qid+'~2~ResultsTd');
var end3 = document.getElementById(qid+'~3~result');
var cont3 = document.getElementById(qid+'~3~ResultsTd');

jQuery(cont1).css({"text-align":"left"});
jQuery(end1).before("Choice 1");
jQuery(end1).css({"display":"none"});

jQuery(cont2).css({"text-align":"left"});
jQuery(end2).before("Choice 2");
jQuery(end2).css({"display":"none"});

jQuery(cont3).css({"text-align":"left"});
jQuery(end3).before("Choice 3");
jQuery(end3).css({"display":"none"});

if (jQuery(window).width() > 480) {
jQuery(cont1).css({"min-width":"130px"});
jQuery(cont2).css({"min-width":"130px"});
jQuery(cont3).css({"min-width":"130px"});
}
ConstantSumSliders.png

Leave a Reply