将 Qualtrics 滑块向左/向右移动

Question

我正在尝试在 qualtrics 中设计一项真正的努力任务，我需要滑块相互偏移。它大致应该如下所示：

sliders

我没有找到任何关于滑块元素的 HTML 代码，仅与问题文本框有关。

我们将不胜感激！

谢谢

Answer 1

您可能想尝试定位：

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>

或者可能带有负的margin 值：

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>

那么，你应该选择哪一个？

使用position: relative 定位移动对象在它们被放置之后：

另一方面，使用margin 定位会物理地将输入移动到左侧。选择权在你。

您可能从上述解决方案中得到的问题是它可能溢出您的身体。这可以通过将left-margin 或position 设置为所有input 来轻松解决，就像我一样。

另外，请注意 input[type="range"] 选择器，以便它只选择您的 range 滑块。