Modifying Sliders | XM Community
Solved

Modifying Sliders


Userlevel 1
Badge +2
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.
icon

Best answer by Anonymous 4 May 2019, 02:06

View original

5 replies

Userlevel 7
Badge +27
Yes, the best way to do this is with a Mutation Observer.
Userlevel 1
Badge +2
> @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

Userlevel 5
Badge +19

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