Vertical Slider Coding | XM Community
Skip to main content
Michael_Cooksey
Administrator
21 days ago
Solved

Vertical Slider Coding

C
Hello! Trying to set up a vertical slider (non-graphic) for EQ5D VAS question. They are very strict on it being a vertical scale/slider. I am no Java or CSS expert and could use some help setting this up! Is anyone able to provide some advice or sample code? Thanks in advance!

Best answer by TomG

Here is how you create a vertical slider: https://stackoverflow.com/a/27108716/4434072 You'll have to add some JS to capture the value into an actual Qualtrics input field.
View original

12 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5926 replies
  • Answer
  • July 29, 2019
Here is how you create a vertical slider: https://stackoverflow.com/a/27108716/4434072 You'll have to add some JS to capture the value into an actual Qualtrics input field.
C
S
N
4 people like this
  • C
    CarV
  • S
    Sammy
  • N
    Nori
  • Sachin Nandikol
    Sachin Nandikol
C
  • CarV
  • Author
  • 1 reply
  • July 31, 2019
Thanks for the advice, just need some clarification on the: "You'll have to add some JS to capture the value into an actual Qualtrics input field." I have added the following code to the custom CSS field in "Look and feel": input[type="range"] { position: absolute; top: 40%; transform: rotate(270deg); } Do I then need to add JS to the scale question to execute this function? Thanks!
TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5926 replies
  • July 31, 2019
> @CarV said: > Thanks for the advice, just need some clarification on the: "You'll have to add some JS to capture the value into an actual Qualtrics input field." > I have added the following code to the custom CSS field in "Look and feel": > input[type="range"] { > position: absolute; > top: 40%; > transform: rotate(270deg); > } > > Do I then need to add JS to the scale question to execute this function? > > Thanks! The CSS will style any range inputs you happen to add to your survey. I don't believe Qualtrics has any questions that use range input. So, you'll have to add the range input html to your question, then you'll have to write JS to capture the value either into a Qualtrics question or embedded variable in order to save it.
M
  • MadisonP
  • 1 reply
  • August 7, 2019
I am also trying to program the EQ5D VAS in Qualtrics (vertical not horizontal slider scale with a separate input box that populates the slider selection number). I am a novice with CSS and JS and struggling to do this. Can anyone provide a link to the range input code? And is there a way to get a separate input box to populate the slider scale selection? Thank you in advance for any guidance.
w.patrick.gale
Level 3 ●●●
Forum|alt.badge.img+13
See https://www.qualtrics.com/community/discussion/3451/program-eq-5d-vas-scale To show the input field for the slider TURN OFF the 'Mobile Friendly' option and enable the 'Show Value' option (otherwise the selected value will not appear). You can also enter the slider value in this field, HOWEVER the field is hidden visually so unless you make a CSS change to force a border around the input field then users will not intuitively know that they can change the slider value there.
E
  • Esther
  • 1 reply
  • September 18, 2019
I was also struggling with this. What I understand from the above is that you need to insert something into custom CSS, that you need to add a range input html to the question, and that you need to connect the JS in the question to the CSS. I do not understand how to do this exactly. Can anyone help by describing this in more detail?
C
  • ClaudiaC
  • 1 reply
  • December 4, 2019
I am also struggling in changing the position of the slider from horizontal to vertical. I added the code mentioned in "Look and Feel" but then I don't understand how to modify the JavaScript in the question itself. If I add the same code of "Look and Feel", it doesn't work. Did someone find a solution? Thanks
J
Level 1 ●
Forum|alt.badge.img+7
  • JBrim
  • Level 1 ●
  • 22 replies
  • April 30, 2020

yes, It'd be best if the Question JS was given as an example
Seeing as euroqol - bless them - insist on having a Vertical Scale - a horizontal one will simply not do - it would be good if Qualtrics incorporated this as a core question type. I'm going to suggest it (or vote for it)
At least a good working example of how to do this would be good - does anyone know of any working examples of this?
"So, you'll have to add the range input html to your question, then you'll have to write JS to capture the value either into a Qualtrics question or embedded variable in order to save it." makes complete sense, but the question was where to put the input html?
Thanks for an answer on this

K
1 person likes this
  • K
    KateW
M
  • MIrish
  • 2 replies
  • August 11, 2020

Hi all,
I'm a researcher at King's College London investigating intensive treatments for eating disorders. I am hoping to deliver the EQ-5D VAS questionnaire using Qualtics, however I'm also struggling with the vertical slider. I wondered whether anyone's had any luck with doing this?
I've read all the forums and entered the code under the 'Look and Feel' tab but have had no success. Any help would be greatly appreciated!
Many thanks,
Madeleine

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5926 replies
  • August 11, 2020

https://www.qualtrics.com/community/discussion/comment/28932#Comment_28932See this thread: https://www.qualtrics.com/community/discussion/3451/program-eq-5d-vas-scale#latest

M
  • MIrish
  • 2 replies
  • August 12, 2020

Hi TomG,
Thanks so much for getting back to me so quickly - I'm really grateful for your help. I've had a look at the link you've provided... is there any chance you could screenshot where you add the NoUiSlider style sheet and JS to the survey header?
I am fairly new to Qualtrics and struggling to navigate the platform. Any pointers would be really helpful.
Thanks,
Madeleine

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5926 replies
  • August 12, 2020

As requested...
image.png

Leave a Reply


Terms & Conditions