Formatting "show value" on slider question | XM Community
Skip to main content

I am using a slider for an income question. I indicate that the answer is "in thousands of dollars" as the slider goes from 10 to 200 (for carry-over purposes, I need approximate values). So if the answer is $21,000, the participant should slide to 21.
My question is: Is there a way for the value shown on the slider (when I click on "show value" to display $21,000 (with or without the dollar sign) instead of 21?

You can use a JS mutation observer. A mutation observer is an event based off a change in the DOM. In your case, it would be a change to the slider.


Hi FrancescaM ,
You can achieve the above requirement to " "show value" to display $21,000 (with dollar sign) instead of 21"
Just copy the below code in 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)*1000);
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😊!!!


This is great! Thank you @qualtrics_nerd!

I’m already using your JS to display dollar signs on the slider. 

Do you happen to know how to get the "show value" to display numbers with 2 decimal points? The slider includes options in both dollars and cents (e.g., $1.25) and I’ve set the question to display 2 decimal points. However, if I want to slide to $1.10, the value displayed is $1.1 (i.e., the question always omits zeros at the second decimal point). Do you know a way around this? Thanks again!  


@FrancescaM You can get the 0 to display at the second decimal point by adding a toFixed(2) to qualtrics_nerd’s code. 

// Select the node that will be observed for mutations
const targetNode = document.getElementsByClassName("sliderToolTipBox")o0];
let observer = new MutationObserver(function() {
targetNode.innerHTML = "$"+(Math.abs(targetNode.innerHTML).toFixed(2));
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
});

 


Leave a Reply