How do I customize/format slider scale options? | XM Community
Skip to main content
Solved

How do I customize/format slider scale options?

  • January 7, 2019
  • 10 replies
  • 714 views

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?

Best answer by MsIreen

@qualfun Try this one `<style> ul.numbers li::after { content:"$"; } </style>`

10 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • January 7, 2019
You have to use JavaScript to do this.

  • January 7, 2019
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

  • Author
  • January 9, 2019
Thank you! The CSS code did not work. Is there javascript you recommend?

  • Author
  • January 9, 2019
Thank you! The CSS code did not work. Is there javascript you recommend?

  • Author
  • January 9, 2019
The css code adds the dollar sign on the scale endpoints but not the options within the scale.

MsIreen
Level 5 ●●●●●
Forum|alt.badge.img+23
  • Level 5 ●●●●●
  • Answer
  • January 12, 2019
@qualfun Try this one `<style> ul.numbers li::after { content:"$"; } </style>`

  • February 19, 2019
> @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.

audreyc
  • July 31, 2020

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?


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • August 1, 2020

qualtrics_nerd
Level 5 ●●●●●
Forum|alt.badge.img+19
  • Level 5 ●●●●●
  • February 7, 2023

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*/

});