How to add a mix of text and numbers to a slider? | XM Community
Skip to main content

I am trying to customize a slider in Qualtrics to show a mix of text and numbers. I'd like the text and numbers to show not just in the tick marks, but also in the text that is displayed to the user of the survey as they drag the slider to and from. 
A toy example of the basic idea is here (though this is a much simpler slider and the value displays differently).
Any help much appreciated. I've perused the forums but couldn't figure out how to do this. Thank you!

Use Mutation Observer for this or you can also take help from this post

Hi daanoo ,
You can achieve the above functionality shown in your link by adding below code in your Qualtrics JS API:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
// Select the node that will be observed for mutations
const targetNode = document.getElementsByClassName("sliderToolTipBox")[0];
let observer = new MutationObserver(function() {

if(targetNode.innerHTML=="0")
{targetNode.innerHTML ="Hello";}
else{
targetNode.innerHTML =Math.abs(targetNode.innerHTML);}
observer.disconnect(); // turn observer off;
observer.observe(targetNode, {
 attributes: true,
 childList: true, // observe direct children
 subtree: true, // and lower descendants too
 characterDataOldValue: true // pass old data to callback
});// turn back on

});

// observe everything except attributes
observer.observe(targetNode, {
 attributes: true,
 childList: true, // observe direct children
 subtree: true, // and lower descendants too
 characterDataOldValue: true // pass old data to callback

});

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

Hope it resolves your query😊!!!

Leave a Reply


Terms & Conditions