How to make custom objects inherit Qualtrics styles? | Experience Community
Skip to main content
Question

How to make custom objects inherit Qualtrics styles?

  • Apr 1, 2025 2:08 AM UTC
  • 3 replies
  • 96 views

Forum|alt.badge.img+1

Hi,

I have a bunch of custom sliders that have starting and ending values based on previous answers by the respondent.

I am trying to keep the visual aspects of the sliders -- colors, tickers, sizes, etc. -- equal to the standard Qualtrics slider, as I have some standard slider questions and I would love to keep consistency.

Is there a simple solution for this, or will I have to do trial and error with CSS code until it matches the Qualtrics sliders

3 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • Apr 1, 2025 2:25 PM UTC

If you use the same html structure and class names as the Qualtrics sliders they will inherit the same styles.


Forum|alt.badge.img+1
  • Author
  • Level 1 ●
  • Apr 1, 2025 8:39 PM UTC

Thanks Tom!

I have been trying the following, based on inspecting the element of the standard slider, which returns:
 

<div class="slider-container"><div class="slider-range-container"><div class="slider-background"></div><div class="slider-progress-container"><div class="slider-progress" style="width: 0%;"></div></div><div class="slider-grid-tick-container"><div class="slider-grid-tick slider-grid-tick-invisible"></div><div class="slider-grid-tick"></div><div class="slider-grid-tick"></div><div class="slider-grid-tick"></div><div class="slider-grid-tick"></div><div class="slider-grid-tick"></div><div class="slider-grid-tick"></div><div class="slider-grid-tick"></div><div class="slider-grid-tick"></div><div class="slider-grid-tick"></div><div class="slider-grid-tick slider-grid-tick-invisible"></div></div><input aria-labelledby="choice-display-QID1-1" class="" max="100" min="0" step="1" type="range" value="0"></div></div>

Then, just making a HTML code that tries to use the same classes is  not replicating any stylistic feature.

Slider using same classes:

Slider using same classes:

<div class="slider-container">
<div class="slider-range-container">
<div class="slider-background"></div>
<div class="slider-progress-container">
<div class="slider-progress" style="width: 0%;"></div>
</div>
<div class="slider-grid-tick-container">
<div class="slider-grid-tick slider-grid-tick-invisible"></div>
<div class="slider-grid-tick"></div>
<div class="slider-grid-tick"></div>
<div class="slider-grid-tick"></div>
<div class="slider-grid-tick"></div>
<div class="slider-grid-tick"></div>
<div class="slider-grid-tick"></div>
<div class="slider-grid-tick"></div>
<div class="slider-grid-tick"></div>
<div class="slider-grid-tick"></div>
<div class="slider-grid-tick slider-grid-tick-invisible"></div>
</div>
<input id="customSlider" max="100" min="0" step="1" type="range" value="0">
</div>
</div>

 


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • Apr 2, 2025 12:38 PM UTC

Check the CSS rules for the Qualtrics sliders.  It may be the location of your slider that is preventing it from picking up the styles (e.g., your slider is a child of QuestionText, but the Qualtrics slider is a child of QuestionBody).