有没有办法我还可以为 HTML5 type=range 控件中的每个步骤设置一些标签文本。基本上我有一个范围控件<input type="range" step=1 min=0 max=4>
,对于每个步骤,我都希望在控件中显示一些标签。有没有办法做到这一点?
7 回答
我已经为你整理好了。
// 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" />
I guess the easiest solution (plain Javascript) is:
<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.
Here's an alternative solution, no jQuery required. Uses the HTML5 oninput
event handler, and valueAsNumber
property of the input element.
Works on my machine certification: 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>
操作,
我整理了一个演示,它使用range
带有相应<p>
标签的输入作为滑块当前状态的标签,以及更改滑块值的触发器。
普朗克
http://plnkr.co/edit/ArOkBVvUVUvtng1oktZG?p=preview。
HTML Markup
<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);
}
Also worth nothing, if you're interested in showing the current value as a label/flag to the user, (instead of many) there's a great article by Chris Coyier on value bubbles for range sliders.
没有本地方法可以做到这一点。由于对 input[type=range] 的支持很差,我建议使用 jQuery UI 滑块和在答案中找到的附加标签的方式。
You can use jSlider. Its a jQuery slider plugin for range inputs.
https://github.com/egorkhmelev/jslider
Just check out the demos and documentation. Hope this helps.
FWIW the standard (HTML 5.1, HTML Living Standard), specifies a label
attribute for option
s when using a datalist
. Sample code here.
This isn't implemented by any browser yet.