How to have custom values appear on multiple sliders | XM Community
Skip to main content
Hi all,



hope anyone could help with this. I would like to show custom values to multiple slider question respondents (e.g. 'good' when '3' is selected).

Has anyone an appropriate code?

!



Thanks in advance
You can achieve this by hiding the default ToolTipBox and show duplicate ToolTipBox. Below is the example. As you want to show different text on each slider point, you will have to modify last line of this code to set html based on value of slider.



Qualtrics.SurveyEngine.addOnReady(function()

{



jQuery('.ResultsInput').change(function()

{

updateTT(jQuery(this));

});



jQuery('.trackHolderRel').mousedown(function()

{

updateTT(jQuery(this));

});



function updateTT(element)

{

console.log(jQuery(element).find('.sliderToolTipBox').length)

if(jQuery(element).find('.sliderToolTipBox').length==1)

jQuery(element).find('.sliderToolTipBox').parent().append('<div class="sliderToolTipBox">2</div>')

jQuery(element).find('.sliderToolTipBox').eq(0).hide();

jQuery(element).find('.sliderToolTipBox').eq(1).html('Good')

}





});





!



I know this can be done in better way if you can access events of slider but for now this seems the best workaround.
Hi @KimothiSaurabh, thanks for the help. As a test, I copied that code to my slider question and it does not work for me 😞
@BettoLamacchia - Please make sure "Show Value" is checked in question property. If this still don't work, would like to see your html layout or you can share link with me.
> @KimothiSaurabh said:

> @BettoLamacchia - Please make sure "Show Value" is checked in question property. If this still don't work, would like to see your html layout or you can share link with me.



Hi Kimothi, I just need an example on how to modify last row to have different value (e.g. 'good' for 3, 'excellent' for 5). Thanks again

I join to @BettoLamacchia question, as I have a similar issue. I am working with a slider question scaled in 4 increments (0, 25, 50, 75, 100), where the answers are snaped to increments, so I can make a Likert question more visual (so using labels as "Strongly disagree", "Neutral" and "Strongly agree"). However, I'd like to change the value shown at each bar, that refers to the numeric increments by default, presenting instead a custom text for each option (for example: "Strongly disagree", "somewhat disagree", "Neutral", "somewhat agree" and "Strongly agree").

I followed the example from @KimothiSaurabh, but I don’t know to modify the last line of the provided code (jQuery(element).find('.sliderToolTipBox').eq(1).html('Good')) to match each case.

Thanks in advance!


Leave a Reply