0

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>
Ani Menon
  • 27,209
  • 16
  • 105
  • 126
Fred Chapman
  • 133
  • 1
  • 10
  • 1
    check this out, http://stackoverflow.com/questions/15195449/html5-type-range-showing-label – David May 17 '16 at 18:29

1 Answers1

1

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/

johnniebenson
  • 540
  • 3
  • 9