自定义范围输入

Question

我需要垂直范围输入滑块垂直并在对数位置有标签。我还没有找到任何预制的滑块来做到这一点。我只需要指出什么是实现这一目标的最佳方式。我试图覆盖与蜱图像，但didint似乎工作得很好，任何建议将不胜感激。

Answer 1

你可以从这个小提琴开始。它基于之前的评论。只需为整个组件创建一个容器。然后将范围输入旋转90度并通过边距修正位置。然后创建一个标签，将放置所有位置由您的需求，你试图通过CSS旋转古典范围输入

#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; }

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