HTML:我可以在 slider 的范围内添加标签吗？

Question

我有一个 slider 。该 slider 具有颜色编码范围(例如绿色 0 < 25、黄色 26 < 50、橙色 51 < 75、红色 76 < 100)，我想在 slider 本身的这些范围内添加文本标签，或者只是作为标签在 slider 下方。有没有一种方法可以做到这一点而不必将像素与像素进行匹配？滑动条的宽度也是基于宽度百分比(宽度:85%)，所以有一个固定的选项并不理想。

滑动条代码:

<div className='entry-field'>
  <div className='slider-text'>
    Higher than: {value}
  </div>
  <div className='inline slider'>
    <span className='limit'>0</span>
    <input type="range" min="0" max="100" value={value} step="5" onChange={this.onChange}/>
    <span className='limit'>100</span>
  </div>
</div>

Answer 1

你可以创建一个 ul标签并根据它们的百分比定位它们。

<ul class="colors">
<li class="green">Green</li>
<li class="yellow">Yellow</li>
<li class="orange">Orange</li>
<li class="red">Red</li>
</ul>

示例:https://jsfiddle.net/vx0jn7yf/