Community Groups are officially here!
We've released Groups, a new feature that enables us to connect community members of similar industries and interests in a shared, private space. You can check out all of the details here, including information about who can join, how to join, and what Groups are currently offered. Please leave your feedback through this Community Groups Feedback Survey.

How to add commas to max value grid line on slider questions.

Charlie1099 Kent, OHCommunity Member Qubie ✭
edited January 2020 in Custom Code

Hello, Qualtrics Community.

I have searched through the community but have not been able to find a specific answer for this. So, if it has been asked before I apologize.

I would like to take the maximum value that appears above the grid line for a slider question and add commas to this number. For example, one end-point is the number 100,000; however, this number displays as: 100000 (which can be difficult to determine that it is 100 thousand at a glance).

Does anyone have any suggestions for using javascript to change this on the slider questions?

I found this code on Stack Overflow but can't seem to get it to work for the grid-line values:
function commaSeparateNumber(val){ while (/(\d+)(\d{3})/.test(val.toString())){ val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2'); } return val; }

I also found this post in the community about adjusting the size of the numbers and this post includes information for adding a percentage sign after the numbers on the scale.

Any help would be greatly appreciated! If CSS is the only way to do that, then that is fine too. I have another slider scale with an endpoint of 1,000 that I would also like to display with a comma.


  • Charlie1099
    Charlie1099 Kent, OHCommunity Member Qubie ✭
    edited January 2020

    I have also seen this post in the community which comes very close to a usable solution.

    Here, I can add HTML to each specific question (I don't want the code to apply to all questions in the survey because some end points are just 1 and not 1,000 or 100,000):

    <style>ul.numbers li::after { content:",000"; }</style>
    <style> ul.numbers li:nth-child(1):after { content:""; } </style>

    However, this seems to add a space after the number before appending it with the added content after. So, is there a way to remove the space so the number appears as: "1,000" rather than: "1 ,000" ?