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?
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"});
}
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.