CODEWITHSUNDEEP
htmlcss
Fred Chapman
Fred Chapman

Reputation: 133

HTML: Can I add labels within ranges on a slider bar?

I have a slider bar. That slider bar has color coded ranges (e.g. green 0 < 25, yellow 26 < 50, orange 51 < 75, red 76 < 100) and I would like to add text labels within those ranges on the slider bar itself, or just as labels below the slider bar. Is there a method for doing this without having to match pixel to pixel? The width of the slider bar is also based on a width percentage (width: 85%) so having a fixed option isnt ideal.

Code for slider bar:

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

Upvotes: 0

Views: 2780

Answers (1)

johnniebenson
johnniebenson

Reputation: 540

You could just create an ul of labels and position them according to their percentage.

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

Example: https://jsfiddle.net/vx0jn7yf/

Upvotes: 1

Related Questions