Custom slider with graphics - fine tuning | XM Community
Skip to main content

Hi there,
I have adapted the code referenced here: https://www.qualtrics.com/community/discussion/6560/how-can-i-create-a-personalized-graphic-slider-question-with-javascript
It's worked incredibly well to create a slider that outputs a certain graphic. I have two fine-tuning questions.

  1. We have set our slider to start at a random position. Is there a way to change the default image (right now a blank white square) to the image displayed at that slider position? So, for example, if you refresh the page, the slider starts at 14 and displays the image of the 14. If you refresh again, the slider starts at, say, 2 and displays the image of the 2.

  2. Is there a way to make the image appear below the slider?

Would really be grateful for your help!

ok, I figured out item 2 using .insertAfter("div.slider-container:last")
However, I'd like the slider labels to be below the slider but above the image. Previously I did this using the same thing (.insertAfter("div.slider-container:last"). However this obviously then puts the slider labels under the image. I'd like them to be below the slider and above the image.
Sorry if these are totally newbie questions - not super familiar with this stuff!


Ah! I can just do .insertAfter("ul.labels")
Question 1 still persists...


Leave a Reply