How do I customize/format slider scale options? | XM Community
Skip to main content
I would like the slider scale to be a range of dollar values. I am unable to add a dollar sign or commas. Is there CSS code I could use for this?
You have to use JavaScript to do this.
Hello @qualfun ,



Paste the below CSS in Add Custom CSS



ul.numbers li::before{

content: "$";

}





Note: Adding "$" may disturb the layout in mobile-view. Please check on this
Thank you!

The CSS code did not work. Is there javascript you recommend?
Thank you!

The CSS code did not work. Is there javascript you recommend?
The css code adds the dollar sign on the scale endpoints but not the options within the scale.
@qualfun Try this one

`<style>

ul.numbers li::after {

content:"$";

}

</style>`
> @TomG said:

> You have to use JavaScript to do this.



Does anyone have the JS? I do not want to use Custom CSS because I only want this feature for certain questions on my survey, not the entire survey.

https://www.qualtrics.com/community/discussion/comment/10359#Comment_10359Hi Mslreen, is there a way to add this to the popup numbers on the moving slider itself?

https://www.qualtrics.com/community/discussion/comment/28479#Comment_28479Use a JS Mutation Observer.

Hi qualfun ,
You can achieve the same(to prepend "$" in show value") 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*/

});

Leave a Reply


Terms & Conditions