html range 显示数字,HTML5类型=范围 - 显示标签(HTML5 type=range - showing label

有没有一种方法，我也可以设置在HTML5类型=范围控制每个步骤的一些标签文本。 基本上我有一个范围控制和用于我想在控制要被示出的一些标签的每个步骤。 有没有办法做到这一点？

Answer 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()]); }); });

Answer 2:

我想最简单的解决方案(普通的JavaScript)是：

resolution (dpi):

οninput="document.getElementById('rangeValLabel').innerHTML = this.value;"

step="1" name="rangeVal" id="rangeVal" value="200">

此代码不需要jQuery的，也不CSS，并应在支持范围内的输入类型的任何浏览器。

Answer 3:

这里有一个替代的解决方案，没有jQuery的需要。 采用HTML5 oninput事件处理程序， valueAsNumber输入元素的属性。

工作在我的机器认证：镀铬V54

1

Answer 4:

OP，

我放在一起使用一个演示range与对应的输入

可同时作为标签滑块的当前状态的标记，以及作为触发来改变滑块的值。

普拉克

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

HTML标记

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

}

另外值得什么，如果你有兴趣在向用户显示的电流值作为标签/标志，(而不是很多)，有一个伟大的文章由克里斯Coyier价值为气泡范围滑块。

Answer 5:

有这样做的没有原生的方式。 而作为输入[类型=范围]是很差的支持，我会建议使用jQuery UI的滑块和连接发现标签的方式在这里回答。

Answer 6:

您可以使用JSlider的。 其一个jQuery滑块插件范围的输入。

https://github.com/egorkhmelev/jslider

只是检查出的演示和文档。 希望这可以帮助。

Answer 7:

FWIW标准( HTML 5.1 ， HTML生活标准 )，指定了一个label用于属性option使用当s datalist 。 示例代码在这里 。

这不是由任何浏览器来实现呢。

文章来源: HTML5 type=range - showing label