HTML5 type=range - showing label

Question

Is there a way I can also set some label text for each steps in the HTML5 type=range control. Basically I have a range control

Answer 1

OP,

I put together a demo that uses a range input with corresponding

tags that act as both labels for the current state of the slider, as well as triggers to change the slider's value.

Plunk

http://plnkr.co/edit/ArOkBVvUVUvtng1oktZG?p=preview.

---

HTML Markup

     
    
Label A
    
Label B
    
Label C
    
Label D

Javascript

$(document).ready(function(){

  $("input[type='range']").change(function() {
    slider = $(this);
    value = (slider.val() -1);

    $('p.rangeLabel').removeClass('selected');
    $('p.rangeLabel:eq(' + value + ')').addClass('selected');

  });

  $('p.rangeLabel').bind('click', function(){
    label = $(this);
    value = label.index();
    $("input[type='range']").attr('value', value)
                            .trigger('change');
  });

});

CSS

input[type="range"] {
    width: 100%;
}

p.rangeLabel {
    font-family: "Arial", sans-serif;
    padding: 5px;
    margin: 5px 0;
    background: rgb(136,136,136);
    font-size: 15px;
    line-height 20px;
}

p.rangeLabel:hover {
    background-color: rgb(3, 82, 3);
    color: #fff;
    cursor: pointer;
}

p.rangeLabel.selected {
    background-color: rgb(8, 173, 8);
    color: rgb(255,255,255);
}

Also worth nothing, if you're interested in showing the current value as a label/flag to the user, (instead of many) there's a great article by Chris Coyier on value bubbles for range sliders.