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!
Question
How to add a mix of text and numbers to a slider?
+19Hi 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😊!!!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.