Community Groups are officially here!
We've released Groups, a new feature that enables us to connect community members of similar industries and interests in a shared, private space. You can check out all of the details here, including information about who can join, how to join, and what Groups are currently offered. Please leave your feedback through this Community Groups Feedback Survey.

Vertical Slider Coding

CarV
CarV AutraliaCommunity Member Qubie ✭

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

Answers

  • CarV
    CarV AutraliaCommunity Member Qubie ✭

    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
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭

    @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.

  • MadisonP
    MadisonP Charlotte, NCCommunity Member - Trial User Qubie ✭

    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
    w.patrick.gale Community Member Guru ✭✭

    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.

  • Esther
    Esther Community Member Qubie ✭

    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?

  • ClaudiaC
    ClaudiaC Community Member Qubie ✭

    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

  • JBrim
    JBrim Cambridge of the non-massachusetts varietyCommunity Member Qubie ✭

    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

  • MIrish
    MIrish LondonCommunity Member Qubie ✭

    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

  • MIrish
    MIrish LondonCommunity Member Qubie ✭

    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
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭

    As requested...