Question

我需要将垂直范围输入滑块垂直放置，并在对数位置放置标签。我还没有发现任何预制的滑块可以做到这一点。我只需要指出什么是实现这一目标的最佳方法。我试图用刻度覆盖图像，但这似乎也很好用，任何建议都会非常感激。

Answer 1

你可以从这个小提琴开始。它基于之前的评论。只需为整个组件创建一个容器。然后将范围输入旋转到90度并按边距校正位置。然后为标签创建容器，您将在其中放置所有标签，其位置由您的需求定义

＆＃13;

#all { position: relative; width: 200px; height: 200px; }
#all input {
    width: 200px;
    margin-top: 50%;
    margin-left: -30%;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
#all .labels {
  position: absolute;
  top: 20px;
  left: 0;
  height: 180px;
  
}
#label1 { position: absolute; bottom: 0; left: 0; }
#label2 { position: absolute; top: 50%; left: 0; }
#label3 { position: absolute; top: 0; left: 0; }

＆＃13;

<div id="all">
  <input type="range" min="0" max="100" step="1" />
  <div class="labels">
    <span id="label1">0</span>
    <span id="label2">50</span>
    <span id="label3">100</span>
  </div>
</div>

＆＃13;

自定义范围输入

1 个答案: