HTML 类型= "range"值应该只在滑动后生成



我使用html type="Range"来获取1-100之间的值,我没有给出任何默认值,但它将50作为默认值。但我希望它只在我更改滑块时才接受一个值,在此之前它不应该给出任何值。有什么办法吗?

与此链接一样,它将25作为默认值。

http://jsfiddle.net/kxbdgwzo/enter code here

如果你只想不显示初始值,那么就这样更改你的javascript:

var output = document.getElementById('range');
output.innerHTML = '';
function showValue(newValue) {
    output.innerHTML = newValue;
}
$('#slider').change(function(e) {
    showValue($(this).val());
});

否则,如果您只希望初始值为零,只需将value="0"添加到<input>中即可。

不能将初始值设置为null。范围滑块需要一个初始值,否则它们默认为中间值。在这种情况下,例如,您可以通过将value属性设置为0在0处初始化它。

<html>
<body>
    <input id="slider" type="range" min="0" value="0" max="50" step="1" />
    <h2 id="range">0</h2>
</body>
</html>

Fiddle

如果需要,可以隐藏该值,但如果希望滑块不自动居中初始化值,则无法完全消除该值。

编辑:另一个选项是预设图像不透明度,并且在单击滑块之后才将不透明度控制传递给滑块。将滑块值设置为50,以便在第一次单击滑块时图像将保持完全不透明,但不透明度值在获得焦点后将由滑块控制。

最新更新