问HTML5 type=range -显示标签

EN

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

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