Hi there. Matthew Gardner with the NBA's Portland Trail Blazers here. We utilize a dark theme template on many of our surveys. I've run into the same issue with the slider question type in dark mode: the slider itself (and corresponding number for wherever the slider lands) stays black, and there's no option to change it to a white/light slider. See my attachments for reference (if you really squint you'll see the slider and corresponding number are at position '5'. Does anyone have a simple workaround - or can Qualtrics put this on their to-do list? For all of the amazing things Qualtrics can do - this one sure has me stumped. Thanks for your time!
Solved
Slider stays black when survey is in dark mode - any way to turn the slider white/light?
+1Best answer by ahmedA
Seems like it should be an out-of-the-box feature.
I partially agree with you. The issue here is that, you are using a custom theme, so it's actually the fault of the designer for not paying attention to detail. Therefore, if the designer was from Qualtrics, the it's their fault, but if it was someone at your end, then they should be held responsible.
You can add custom css by Look and Feel --> Style --> Custom CSS.
Paste the code above in the box.
If you'd like to enable it for all surveys, in the admin panel, go to mange themes and make and edit there.
The custom theme/template is created by your brand admin and not Qualtrics, so I would flagging the issue there.
If you'd like help here, then a good place to start would be by sharing the survey preview link.
+1Thanks ashmedA for getting back to me. I'm the admin and I'm unaware of a way to change the slider (and corresponding numbers that 'float' above the bar) from black to white. Do you know how?
My current setup is: question type -> slider, slider type -> bar.
Here is a preview link for you to test what I mean. Please slide the slider and note the numbers at the top of the slider, you can barely make them out only when scrolling over the player's white jersey in the background image.
Try adding this to your custom CSS
.Skin .HBAR .trackHolderRel .track:hover, .Skin .HBAR .trackHolderRel.activated .track{
border-color:white!important;
}
.Skin .SS .horizontalbar .handle, .Skin .SS .verticalbar .SSTrack .handle, .Skin .horizontalbar .BarContainer:hover .bar, .Skin .horizontalbar .Slider .handle, .Skin .horizontalbar .activated .bar{
background-color:white;
}
+1Thanks ahmedA - I'm familiar with adjusting JavaScript but not CSS.
I would think Qualtrics would recognize that when 'dark' background is switched 'on' their bars should be 'light' (not default to dark) - do you know any way to suggest this as a feature update? Seems like it should be an out-of-the-box feature.
Thanks again.
Seems like it should be an out-of-the-box feature.
I partially agree with you. The issue here is that, you are using a custom theme, so it's actually the fault of the designer for not paying attention to detail. Therefore, if the designer was from Qualtrics, the it's their fault, but if it was someone at your end, then they should be held responsible.
You can add custom css by Look and Feel --> Style --> Custom CSS.
Paste the code above in the box.
If you'd like to enable it for all surveys, in the admin panel, go to mange themes and make and edit there.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.