Thanks in advance!
Best answer by TomG
View original
Vertical Slider Coding
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!
Thanks in advance!
Userlevel 7
+27
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.
You'll have to add some JS to capture the value into an actual Qualtrics input field.
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!
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!
Userlevel 7
+27
> @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.
> 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.
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.
Thank you in advance for any guidance.
Userlevel 5
+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.
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.
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?
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
Did someone find a solution? Thanks
+4
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
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
Userlevel 7
+27
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
Userlevel 7
+27
As requested...
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.