Append a % sign in selected value that shows on slider handle | XM Community
Skip to main content

I have a simple slider question that goes 0% to 100%. I added the following to the java script for the question in order to add "%" to the value above the slider bar:
jQuery('#'+this.questionId+' .numbers').find('li').append('%')
However, I'd really like it if the selected value that shows up within the slider handle would also have a % sign appended.
How can I do that?



I forgot to add that this is in "mobile friendly" mode where the selected response shows in a handle.


Use Mutation observer


I would also like to know the answer to this


Hi Annie and @mckelvey
You can achieve the same(to append "%") using the below code by adding below code into 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() {
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