HTML5输入类型范围显示范围值

我正在做一个网站，我想使用范围滑块（我知道它只支持webkit浏览器）。HTML5输入类型范围显示范围值

我已经完全整合了它，并且工作正常。但我想用文本框来显示当前的幻灯片值。

我的意思是，如果最初的滑块值为5，那么在文本框中它应该显示为5，当我滑动文本框中的值应该改变。

我可以只使用CSS或html来做到这一点吗？我想避免JQuery。可能吗？

2012-04-04 Niraj Chauhan

你不能这样做没有JavaScript。 – mrtsherman 2012-04-04 05:12:22

你可以*使用'：before' /'：after'，'content'和'attr（）'来做这个事情，就像[this]（http://jsfiddle.net/hVvK2/）一样。然而，之前/之后的伪元素实际上吃掉了某些滑块的范围（尽管也许这是可以修复的），最重要的是，如果滑块被操纵，则值不会更新。尽管如此，我认为将此留在这里会很有趣。未来可能会变得可能。 – waldyrious 2013-07-02 15:47:14

修复@waldir的解决方案导致http://jsfiddle.net/RjWJ8/，尽管它仍然使用JavaScript更新属性的值属性。 – user1277170 2014-03-20 15:21:21

这使用JavaScript，而不是直接jQuery。它可能会帮助你开始。

function updateTextInput(val) { 
 
      document.getElementById('textInput').value=val; 
 
     }

<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);"> 
 
<input type="text" id="textInput" value="">

来源

2012-04-04 04:19:19 ejlepoud

但无论如何要做到这一点没有JavaScript或jQuery的？ – 2012-04-04 04:26:58

+14

这是来自http://mobile-web-app.blogspot.com/2012/03/easy-display-value-for-of-slider-in.html，仍然是JavaScript。 'code' 范围 5 – ejlepoud 2012-04-04 04:48:12

+25

有没有人认为提供盲目的滑块是缺乏的。诚然，提供花哨的小部件不是基本标准的作用，但显示选定的值是这个小部件的核心，所以我认为（可选）显示基本形式中的数字，例如在滑动手柄顶部的工具提示使更好的设计。 – 2013-04-07 01:28:33

119

对于那些谁仍在寻找没有单独的JavaScript代码的解决方案。有没有编写JavaScript或jQuery的功能有点简单的解决方案：

<form name="registrationForm"> 
    <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="100" oninput="ageOutputId.value = ageInputId.value"> 
    <output name="ageOutputName" id="ageOutputId">24</output> 
</form>

JsFiddle Demo

如果你想显示在文本框中的值，只需更改输出输入。

更新：

It is still Javascript written within your html, you can replace the bindings with below JS code:

document.registrationForm.ageInputId.oninput = function(){ 
    document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value; 
}

无论是使用元素的ID或名称，无论是在现代浏览器的支持。

来源

2013-09-21 18:52:05

很有创意... – 2013-11-06 01:46:03

+1知道我知道。唯一的问题是，E.I不支持它。（W3School）http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_output – radbyx 2014-06-14 12:21:47

它仍然是javascript，绑定输入表单元素比输入元素本身更糟糕。 – cuixiping 2014-10-20 00:19:45

一个更好的办法是捉对输入本身，而不是整个表格（性能明智）输入事件：

<input type="range" id="rangeInput" name="rangeInput" min="0" max="20" value="0" 
     oninput="amount.value=rangeInput.value">              

<output id="amount" name="amount" for="rangeInput">0</output>

这里有一个fiddle（与id添加为每莱恩的评论）。

来源

2014-01-19 11:06:14

在Firefox 27中，直到我为输出添加'id =“amount”'后，这对我才起作用。 – Ryan 2014-03-20 04:38:39

这应该工作没有ID： 'oninput =“this.form.amount.value = this.value”' – d1Mm 2014-04-11 02:44:59

这工作，但我如何获得当前值并显示它当页面刷新？： -/ – user2513846 2015-09-03 20:30:53

版本编辑输入：

<form> 
    <input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" /> 
    <input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" /> 
</form>

http://jsfiddle.net/Xjxe6/

来源

2014-04-11 03:12:31 d1Mm

用'this.nextElementSibling'或'this.previousElementSibling'替换表单变量，并用onchange替换ininput以获取在表单外工作的版本。 http://jsfiddle.net/Xjxe6/94/ – 2015-03-23 20:45:27

如果你想显示在滑块下方的电流值，并与它一起移动，试试这个：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>MySliderValue</title> 
 

 
</head> 
 
<body> 
 
    <h1>MySliderValue</h1> 
 

 
    <div style="position:relative; margin:auto; width:90%"> 
 
    <span style="position:absolute; color:red; border:1px solid blue; min-width:100px;"> 
 
    <span id="myValue"></span> 
 
    </span> 
 
    <input type="range" id="myRange" max="1000" min="0" style="width:80%"> 
 
    </div> 
 

 
    <script type="text/javascript" charset="utf-8"> 
 
var myRange = document.querySelector('#myRange'); 
 
var myValue = document.querySelector('#myValue'); 
 
var myUnits = 'myUnits'; 
 
var off = myRange.offsetWidth/(parseInt(myRange.max) - parseInt(myRange.min)); 
 
var px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetParent.offsetWidth/2); 
 

 
    myValue.parentElement.style.left = px + 'px'; 
 
    myValue.parentElement.style.top = myRange.offsetHeight + 'px'; 
 
    myValue.innerHTML = myRange.value + ' ' + myUnits; 
 

 
    myRange.oninput =function(){ 
 
    let px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetWidth/2); 
 
    myValue.innerHTML = myRange.value + ' ' + myUnits; 
 
    myValue.parentElement.style.left = px + 'px'; 
 
    }; 
 
    </script> 
 

 
</body> 
 
</html>

请注意，此类型的HTML输入元素具有一个隐藏功能，例如，当元素具有焦点时，可以使用左/右/下/上箭头键移动滑块。与Home/End/PageDown/PageUp键相同。
1：

来源

2016-02-14 11:12:47 drugan

<form name="registrationForm"> 
 
    <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="10" onchange="getvalor(this.value);" oninput="ageOutputId.value = ageInputId.value"> 
 
    <input type="text" name="ageOutputName" id="ageOutputId"></input> 
 
</form>

来源

2016-10-09 17:11:07 luis

错误：{ “message”：“Uncaught ReferenceError：getvalor is not defined”， “filename”：“https://stacksnippets.net/js”， “ lineno“：12， ”colno“：169 } – Darush 2017-07-29 01:33:16

，如果您还在为寻找答案，你可以在地方型的使用INPUT TYPE =“号” =“范围”最小值最大值工作，如果它的顺序设置-name
2-的maxlength
3-大小
4分钟
5-MAX
只是将它复制

<input name="X" maxlength="3" size="2" min="1" max="100" type="number" />

来源

2017-01-18 23:05:11

如果您使用多张幻灯片，你可以使用jQuery，你可以做后续轻松处理多个滑块：

function updateRangeInput(elem) { 
 
    $(elem).next().val($(elem).val()); 
 
}

input { padding: 8px; border: 1px solid #ddd; color: #555; display: block; } 
 
input[type=text] { width: 100px; } 
 
input[type=range] { width: 400px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="0"> 
 
<input type="text" value="0"> 
 

 
<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="50"> 
 
<input type="text" value="50">

此外，通过在<input type='range'>上使用oninput，您将在拖动范围时收到事件。

来源

2017-07-20 09:21:16

HTML5输入类型范围显示范围值

回答

相关问题