HTML5类型=范围-显示标签

是否有一种方法可以为HTML5 type=range控件中的每个步骤设置一些标签文本。基本上，我有一个范围控件

，对于每个步骤，我希望在控件中显示一些标签。有什么方法可以做到这一点吗？

我已经为您准备好了

//定义查找范围内每个值应显示的文本
var范围值=
{
“1”：“您已选择选项1！”，
“2”：“…现在选择2！”，
“3”：“…堆垛溢出的岩石3个！”，
“4”：“…和自定义标签4！”
};
$（函数（）{
//在页面加载时，根据范围的值设置标签的文本
$（'#rangeText'）.text（rangeValues[$（'#rangeInput'）.val（））；
//设置事件处理程序，以在拖动范围值（请参阅事件以获取输入）或更改范围值（请参阅事件以获取更改）时设置文本
$（'#rangeInput'）。在（'input change'，function（）{
$（'#rangeText'）.text（rangeValues[$（this.val（））；
});
});
没有本机的方法。由于对输入[type=range]的支持非常差，我建议使用jQuery UI滑块和在answer中找到的附加标签的方法。
OP

我制作了一个演示，它使用一个
范围
输入和相应的
标记，作为滑块当前状态的两个标签，以及更改滑块值的触发器

扑通


HTML标记
CSS
如果您有兴趣将当前值作为标签/标志显示给用户（而不是许多），那么也没有任何价值。对于范围滑块，有一个很大的值气泡。
您可以使用jSlider。它是一个用于范围输入的jQuery滑块插件


只需查看演示和文档。希望这有帮助。
我想最简单的解决方案（纯Javascript）是：


决议（新闻部）：

这段代码不需要jQuery或CSS，应该可以在任何支持范围输入类型的浏览器上使用
 这里有一个替代解决方案，不需要jQuery。使用HTML5
oninput
事件处理程序和输入元素的
valueAsNumber
属性

适用于我的机器认证：Chrome v54



1.
FWIW标准（，）在使用
数据列表时为
选项
指定一个
标签
属性。示例代码

这还没有被任何浏览器实现
 这取决于浏览器，取决于浏览器如何实现它是否有任何特定的标记为每个步骤添加标签？它支持什么浏览器？有关范围类型当前状态的更多信息：在示例中，您设置了一个标签文本，但我的问题更多的是，我为每个步骤显示文本，例如：为值1显示名称A，为滑块下的每个步骤显示名称B->2等。我的想法是，我想使用滑动条而不是组合框，我想在每个步骤下以文本形式显示下拉列表中的显示项目。我可以将这些标签放在输入下方，使其对应的值吗？如果希望在滑动条时自动更改，则应使用
oninput
而不是
onchange
。看见
<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>

$(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');
  });

});

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

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