Position Labels to the Left and Right Side of the Slider

Question

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?

Tom_1842 · Answer

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"});}

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded