1

I am trying to design a real effort task in qualtrics, where I need the sliders to be offset from one another. It roughly should look like follows:

sliders

I did not find any HTML codes regarding slider elements, only with respect to the question text-box.

Some help would be much appreciated!

Thank you

SK04
  • 13
  • 5

1 Answers1

0

you might want to try with positioning:

input[type="range"] {
  margin-left: 50px;
}

.a-little-left {
  position: relative;
  left: -5px
}

.more-left {
  position: relative;
  left: -50px;
}
<input type="range" class="a-little-left" id="range-one"><label for="range-one">0</label><br/>
<input type="range" class="more-left" id="range-two"><label for="range-one">50</label>

Or maybe with negative margin values:

input[type="range"],
label {
  position: relative;
  left: 50px;
}

.a-little-left {
  margin-left: -5px
}

.more-left {
  margin-left: -50px
}
<input type="range" class="a-little-left" id="range-one"><label for="range-one">0</label><br/>
<input type="range" class="more-left" id="range-two"><label for="range-one">50</label>

So, which one should you choose?

Positioning with position: relative moves objects after they've been placed: an example of positioning with position: relative

On the other hand, positioning with margin physically moves the input to the left. The choice is yours.

The problem that you may get from above solutions is that it can overflow your body. This can be easily fixed by setting a left-margin or a position to all your input, like I did.

Also, note the input[type="range"] selector, so that it only select your range sliders.

Community
  • 1
  • 1
Puka
  • 1,485
  • 1
  • 14
  • 33
  • Works great, thank you very much! Since these are not the original qualtrics sliders, I need to code the scoring myself. Sliders positioned at value 50 should account for one score point and at any other value for zero points. The total score should be saved in an embedded data field. Is there any solution for that? – SK04 May 22 '18 at 12:37
  • Here is a hint : https://stackoverflow.com/questions/10004723/html5-input-type-range-show-range-value#18936328 – Puka May 22 '18 at 12:46
  • If you're still having problems, feel free to open a new question :) – Puka May 22 '18 at 12:47