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

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

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

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>

 

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).

Leave a Reply


Terms & Conditions