Modifying Sliders | XM Community
Skip to main content
I am trying to add "%" to a slider so that when someone slides through, the user reads a number along with the "%" sign, for e.g. instead of "7", the user sees "7%" on top of the slider. Is there a way to implement this through JS? Thanks.
Yes, the best way to do this is with a Mutation Observer.
> @TomG said:

> Yes, the best way to do this is with a Mutation Observer.



I am a beginner at JS and I do not know about this command. How can I implement it? Thanks.
Hello @R_I ,



Paste the below code in the js(OnReady) of the slider question



jQuery("#"+this.questionId+" div.track").mousedown(function (e1) {

jQuery(document).mouseup( function(e2) {

var s = jQuery(".sliderToolTipBox ").text().replace("%","");

jQuery(".sliderToolTipBox ").text(s+"%");

});

});

TomG I am also looking for a solution. Do you have a sample code? Could you please share here in this forum

Hi LydonLab_RA and Pavan
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


Terms & Conditions