Html HTML5 type=range - 显示标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15195449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 type=range - showing label
提问by Sampat
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?
有没有一种方法可以为 HTML5 type=range 控件中的每个步骤设置一些标签文本。基本上我有一个范围控件<input type="range" step=1 min=0 max=4>，对于每个步骤，我都希望在控件中显示一些标签。有没有办法做到这一点？
回答by David Spence
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" />回答by mischka
I guess the easiest solution (plain Javascript) is:
我想最简单的解决方案（纯 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>
This code does not need jQuery nor CSS and should work on any browser that supports the range input type.
这段代码不需要 jQuery 或 CSS，应该可以在任何支持范围输入类型的浏览器上工作。
回答by Aaron Hudon
Here's an alternative solution, no jQuery required. Uses the HTML5 oninputevent handler, and valueAsNumberproperty of the input element.
这是一个替代解决方案，不需要 jQuery。使用 HTML5oninput事件处理程序和valueAsNumber输入元素的属性。
Works on my machine certification:Chrome v54
适用于我的机器认证：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>回答by couzzi
OP,
操作，
I put together a demo that uses a rangeinput 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.
我整理了一个演示，它使用range带有相应<p>标签的输入作为滑块当前状态的标签，以及更改滑块值的触发器。
Plunk
普朗克
http://plnkr.co/edit/ArOkBVvUVUvtng1oktZG?p=preview.
http://plnkr.co/edit/ArOkBVvUVUvtng1oktZG?p=preview。
HTML Markup
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
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
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 currentvalue as a label/flag to the user, (instead of many) there's a great article by Chris Coyieron value bubbles for range sliders.
同样一文不值，如果您有兴趣向用户显示当前值作为标签/标志，（而不是许多）Chris Coyier有一篇很棒的文章，关于范围滑块的值气泡。
回答by varun1505
You can use jSlider. Its a jQuery slider plugin for range inputs.
您可以使用 jSlider。它是一个用于范围输入的 jQuery 滑块插件。
https://github.com/egorkhmelev/jslider
https://github.com/egorkhmelev/jslider
Just check out the demos and documentation. Hope this helps.
只需查看演示和文档即可。希望这可以帮助。
