HTML：スライダバーの範囲内にラベルを追加できますか？

Question

私はスライダーバーを持っています。そのスライダバーには、色分けされた範囲があります（たとえば、緑色0 < 25、黄色26 < 50、オレンジ51 < 75、赤色76 < 75）、スライダバー自体の範囲内、またはラベルとしてテキストラベルを追加したいスライダーバーの下に表示されます。ピクセルをピクセルにマッチさせることなくこれを行う方法はありますか？スライダバーの幅も幅のパーセンテージ（幅：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/