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 <input type="range" step=1 min=0 max=4> and for each steps I want some label to be shown in the control. Is there a way to do this?

This is browser-dependent, and it depends on how the browser implements it — Explosion Pills, Mar 04 '13 at 06:00
Are there any specific tags to add labels for each steps? What are the browser it supports? — Sampat, Mar 04 '13 at 12:45
Some more info on the current state of the range type: http://www.wufoo.com/html5/types/8-range.html — Noyo, Mar 12 '13 at 00:11

David Spence · Accepted Answer · 2017-10-07T17:49:41.703

26

I've put together for you.

// define a lookup for what text should be displayed for each value in your range
var rangeValues =
{
    "1": "You've selected option 1!",
    "2": "...and now option 2!",
    "3": "...stackoverflow rocks for 3!",
    "4": "...and a custom label 4!"
};


$(function () {

    // on page load, set the text of the label based the value of the range
    $('#rangeText').text(rangeValues[$('#rangeInput').val()]);

    // setup an event handler to set the text when the range value is dragged (see event for input) or changed (see event for change)
    $('#rangeInput').on('input change', function () {
        $('#rangeText').text(rangeValues[$(this).val()]);
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="rangeInput" name="rangeInput" step="1" min="1" max="4">
<label id="rangeText" />

edited Oct 07 '17 at 17:49

answered Mar 06 '13 at 14:09

David Spence

7,999
3
39
63

2

In the example you have set one label text, but my question is more on I have display text for each steps for eg: Display name A for value 1, B->2 etc which would appear under each steps under the slider. The idea is that I want to use slider instead of a combo box and I want the display items coming in dropdown shown as text under each steps – Sampat Mar 06 '13 at 17:28
How can I put those labels below the input to their corresponding values? – Zainul Abideen Mar 12 '19 at 15:22

score 22 · Answer 2 · edited Aug 25 '17 at 19:14

I guess the easiest solution (plain Javascript) is:

<fieldset>
    <label for="rangeVal">resolution (dpi):</label>
    <input type ="range" max="1000" min="20"
        oninput="document.getElementById('rangeValLabel').innerHTML = this.value;"
        step="1" name="rangeVal" id="rangeVal" value="200">
    </input>
    <em id="rangeValLabel" style="font-style: normal;"></em>
</fieldset>

This code does not need jQuery nor CSS and should work on any browser that supports the range input type.

Aaron Hudon · Answer 3 · 2016-11-29T00:21:17.117

19

Here's an alternative solution, no jQuery required. Uses the HTML5 oninput event handler, and valueAsNumber property of the input element.

Works on my machine certification: Chrome v54

<form name="myform" oninput="range1value.value = range1.valueAsNumber">
  <input name="range1" type="range" step="1" min="0" max="4" value="1">  
  <output name="range1value" for="range1" >1</output>
</form>

edited Nov 29 '16 at 00:21

answered Nov 28 '16 at 23:56

Aaron Hudon

5,280
4
53
60

score 1 · Answer 4 · answered Mar 13 '13 at 03:27

OP,

I put together a demo that uses a range input with corresponding <p> 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

<div class="rangeWrapper">
    <input id="slide" type="range" min="1" max="4" step="1" value="1"  /> 
    <p class="rangeLabel selected">Label A</p>
    <p class="rangeLabel">Label B</p>
    <p class="rangeLabel">Label C</p>
    <p class="rangeLabel">Label D</p>
</div>

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.

score 0 · Answer 5 · edited May 23 '17 at 10:31

0

There is no native way of doing it. And as input[type=range] is very poorly supported, I will recommend using jQuery UI slider and the way of attaching labels found here in answer.

edited May 23 '17 at 10:31

Community

1
1

answered Mar 13 '13 at 02:56

Arman P.

4,314
2
29
47

score 0 · Answer 6 · answered Mar 13 '13 at 05:57

0

You can use jSlider. Its a jQuery slider plugin for range inputs.

https://github.com/egorkhmelev/jslider

Just check out the demos and documentation. Hope this helps.

answered Mar 13 '13 at 05:57

varun1505

800
2
8
16

score 0 · Answer 7 · answered Dec 04 '17 at 08:09

0

FWIW the standard (HTML 5.1, HTML Living Standard), specifies a label attribute for options when using a datalist. Sample code here.

This isn't implemented by any browser yet.

answered Dec 04 '17 at 08:09

Sam Dutton

14,775
6
54
64

HTML5 type=range - showing label

7 Answers7

Plunk

HTML Markup

Javascript

CSS

Linked