Hiding minus (-) signs from slider values | XM Community
Skip to main content

Hi all,
I am trying to create a survey which accepts slider responses from 10 --> 0 --> 10 (with 0 being the neutral response in the middle).
The slider values cannot be directly edited to be positive in both directions, and they are currently set to range from -10 to 10 (image below).
image.png
This could be completed by hiding the minus signs, and a very helpful member of the community suggested using Javascript to complete this (https://www.qualtrics.com/community/discussion/1133/customizing-the-slider-bar) but my institution seems to have disabled Javascript for creating questions (I've requested access but haven't heard back yet).

Have tried using all sorts of CSS but don't think it's really the sort of thing that should be covered by changing the style.
I've tried using labels instead and hiding the numbers (via the below CSS), but they come out slightly offset compared to the slider (image below). Hidden text or changing the widths of each label in the list just makes it display very strangely and stretch beyond the screen width.
.Skin .q-slider ul.numbers {
display: none !important;
  }
image.png

Question:


Does anybody know of any other ways (unlikely, but potentially using custom HTML or CSS, which are enabled) to hide the minus signs, or alternative ways to have the slider look like it's running from 10 --> 0 --> 10 ?

Any help would be much appreciated, as I'm a little stuck otherwise!

One hacky way is to use the pseudo-classes before/after. Something like:
ul.numbers li:nth-child(n):nth-last-child(n+7){
color: transparent !important;
}
ul.numbers li:nth-child(1):after{
content: "10";
color: black !important;
}
Repeat for each of the numbers you want to replace. They'll be slightly off, because you are placing them after the actual numbers (which are still present, but transparent), so you could try fixing that with some position related styles.

Hi, Spon

Without html or css, here is the best fit :
image.pngHi add my own labels from 10 to 0 and to 10 again (labels => edit multiples)

Here is my options :
image.png

https://www.qualtrics.com/community/discussion/comment/34606#Comment_34606Thank you both for your quick replies!

ahmedA - when you say:

Repeat for each of the numbers you want to replace.

could I just check whether you mean repeat both parts of your code or just the second half for each number?

Sorry I'm quite new to CSS so didn't quite understand the part about nth-child and nth-last-child

Thank you for your ideas!

Just the second half for each number. The first half hides all the numbers that are less than zero.

Just an update, thanks to all for your very helpful suggestions; Javascript was enabled for my account in the end so I was able to use the following code:
jQuery("#"+this.questionId+" ul.numbers li").each(function() { this.innerHTML = this.innerHTML.replace("-",""); });

Hi Spon ,
you can achieve the above by adding below JS 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);
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😊!!!

Leave a Reply


Terms & Conditions