HTML5 type=range - 显示标签答案

【问题标题】：HTML5 type=range - showing labelHTML5 type=range - 显示标签
【发布时间】：2017-12-04 16:09:35
【问题描述】：

有没有办法也可以为 HTML5 type=range 控件中的每个步骤设置一些标签文本。基本上我有一个范围控件<input type="range" step=1 min=0 max=4>，并且对于每个步骤，我希望在控件中显示一些标签。有没有办法做到这一点？

【问题讨论】：

这个是依赖于浏览器的，取决于浏览器是如何实现的
是否有任何特定的标签可以为每个步骤添加标签？它支持什么浏览器？
有关范围类型当前状态的更多信息：wufoo.com/html5/types/8-range.html

标签： html

【解决方案1】：

我已经为你准备好了。

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

【讨论】：

在示例中，您设置了一个标签文本，但我的问题更多是关于每个步骤的显示文本，例如：值 1 的显示名称 A、B->2 等将出现在滑块下的每个步骤。这个想法是我想使用滑块而不是组合框，并且我希望下拉菜单中的显示项目在每个步骤下显示为文本
如何将这些标签放在输入下方的相应值？

【解决方案2】：

我猜最简单的解决方案（纯 Javascript）是：

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

此代码不需要 jQuery 或 CSS，应该可以在任何支持范围输入类型的浏览器上运行。

【讨论】：

【解决方案3】：

这是一个替代解决方案，不需要 jQuery。使用 HTML5 oninput 事件处理程序和输入元素的 valueAsNumber 属性。

适用于我的机器认证： 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>

【讨论】：

【解决方案4】：

OP，

我整理了一个演示，它使用range 输入和对应的<p> 标签作为滑块当前状态的标签，以及更改滑块值的触发器。

扑通

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

HTML 标记

<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);
}

同样一文不值，如果您有兴趣向用户显示当前值作为标签/标志（而不是许多），那么在范围滑块的值气泡上会有一个很棒的 article by Chris Coyier .

【讨论】：

【解决方案5】：

没有本地方法可以做到这一点。由于对 input[type=range] 的支持很差，我建议使用 jQuery UI 滑块和在答案中找到here 的附加标签方式。

【讨论】：

【解决方案6】：

您可以使用 jSlider。它是一个用于范围输入的 jQuery 滑块插件。

https://github.com/egorkhmelev/jslider

只需查看演示和文档即可。希望这会有所帮助。

【讨论】：

【解决方案7】：

FWIW 标准（HTML 5.1、HTML Living Standard）在使用datalist 时为options 指定label 属性。示例代码here。

这还没有被任何浏览器实现。

【讨论】：