Adding a "%" to the "show value" of a slider

Hi Aditya_B ,
If you are still looking for the answer.
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*/

});

hi qualtrics_nerd , cool code! I'm going to keep this one in the pocket for when I work with sliders in the future.
If I can just suggest that next time you post code to the community that you first click the Paragraph icon on the left side of the comment box, then the Quotes icon to toggle the Special Formats menu, then the Code Block icon . This will make the code block a bit more readable, like in the below:
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*/

});

Hi Tom_1842 ,
Thanks for the feedback😊.
It certainly is better.
I will keep it in mind from next time.

Hello,
I am new to javascript as well and I am having the same issue. I have tried copying the code above and it does not show an error but nothing changes when I preview the question. Any advice?

jQuery('.numbers').find('li').append('%')
The above code should work!

Hi Catherine_Driver ,
Can you share more details ?
How many sliders on the page?
and where are you copying the code?

As it is working fine at my end.

Hi @qualtrics_nerd !

Thanks a lot for the code. I run into some issues when I have multiple slider questions on the page. The slider no longer allows me to drag.

Many thanks for your help!

hi @qualtrics_nerd ! I’m hoping to have my survey question look just like your demonstration in the above comment but I’ve added the code multiple times and I don’t see any changes to my question. do you know what I might be doing wrong? 

I’ve resolved the issue! If anyone else runs into something similar, apparently certain JavaScript edits are not compatible with the simple survey layout so you need to make sure you’re using the classic layout.