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

【问题标题】：HTML5 input type range show range valueHTML5 输入类型范围显示范围值
【发布时间】：2012-04-17 18:48:15
【问题描述】：

我正在制作一个我想使用范围滑块的网站（我知道它只支持 webkit 浏览器）。

我已经完全集成它并且工作正常。但我想使用textbox 来显示当前幻灯片值。

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

我可以只使用CSS 或html 来执行此操作吗？我想避免JQuery。有可能吗？

【问题讨论】：

如果没有 javascript，您将无法做到这一点。
您可以几乎使用 :before/:after、content 和 attr() 使用 css 执行此操作，例如 this。然而，:before/:after 伪元素实际上占用了滑块的一些范围（尽管这可能是可修复的），最重要的是，如果滑块被操纵，值不会更新。尽管如此，我认为把它留在这里会很有趣。将来可能会成为可能。
修复 @waldir 的解决方案会导致 jsfiddle.net/RjWJ8 尽管它仍然使用 javascript 来更新属性的 value 属性。

标签： html css range

【解决方案1】：

对于那些仍在寻找没有单独 javascript 代码的解决方案的人。没有编写 javascript 或 jquery 函数，几乎没有简单的解决方案：

<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>24</output>

JsFiddle Demo

如果要在文本框中显示值，只需将输出更改为输入即可。

注意事项： 它仍然是在您的 html 中编写的 Javascript，我们可以在 js 中编写类似下面的内容来做类似的事情：

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

除了元素的id，还可以使用name，现代浏览器都支持。

【讨论】：

+1 知道我知道。唯一的问题是 E.I 不支持它。（W3School）w3schools.com/tags/tryit.asp?filename=tryhtml5_output
依然是javascript，在表单元素上绑定oninput比在input元素本身上绑定更糟糕。
@cuixiping，我们可以在元素上绑定oninput而不是表单，我只是为了展示示例。
请原谅这个迟到的菜鸟问题，但是处理程序如何通过它们的 HTML 名称引用 rangeInput 和数量？
我已将问题的代码编辑到最低限度，删除了不必要的代码

【解决方案2】：

没有form、min 或外部JavaScript 的最短版本。

<input type="range" value="0" max="10" oninput="num.value = this.value">
<output id="num">0</output>

说明

如果您想从output 中检索值，您通常使用可以从oninput 链接的id，而不是使用this.nextElementSibling.value（我们利用了我们已经在使用的东西）

将上面的示例与这个有效但更复杂且冗长的答案进行比较：

<input id="num" type="range" value="0" max="100" oninput="this.nextElementSibling.value = this.value">
<output>0</output>

用最短的答案：

我们避免使用 this，这在 JS 中对于新手来说很奇怪
我们避免在 DOM 中连接兄弟姐妹的新概念
我们避免input 中的太多属性将id 放在output 中

备注

在这两个示例中，当等于 0
删除 JavaScript 的 this 关键字使其成为更好的语言

【讨论】：

更好的是，显示值或可以手动设置：

【解决方案3】：

试试这个：

 <input min="0" max="100" id="when_change_range" type="range">
 <input type="text" id="text_for_show_range">

在 jQuery 部分：

 $('#when_change_range').change(function(){
 document.getElementById('text_for_show_range').value=$(this).val();
  });

【讨论】：

【解决方案4】：

对于不关心 jquery 使用的人，这里有一个不使用任何 id 的捷径

<label> userAvatar :
  <input type="range" name="userAvatar" min="1" max="100" value="1"
         onchange="$('~ output', this).val(value)" 
         oninput="$('~ output', this).val(value)">
  <output>1</output>
</label>

【讨论】：

【解决方案5】：

我有一个涉及（Vanilla）JavaScript 的解决方案，但仅作为库。您必须将其包含一次，然后您需要做的就是设置数字输入的适当source 属性。

source 属性应该是您要收听的范围输入的querySelectorAll 选择器。

它甚至适用于 selectcs。它适用于多个听众。它在另一个方向起作用：更改数字输入，范围输入将调整。它适用于稍后添加到页面上的元素（请查看https://codepen.io/HerrSerker/pen/JzaVQg）

在 Chrome、Firefox、Edge 和 IE11 中测试

;(function(){
  
  function emit(target, name) {
    var event
    if (document.createEvent) {
      event = document.createEvent("HTMLEvents");
      event.initEvent(name, true, true);
    } else {
      event = document.createEventObject();
      event.eventType = name;
    }

    event.eventName = name;

    if (document.createEvent) {
      target.dispatchEvent(event);
    } else {
      target.fireEvent("on" + event.eventType, event);
    }    
  }

  var outputsSelector = "input[type=number][source],select[source]";
  
  function onChange(e) {
    var outputs = document.querySelectorAll(outputsSelector)
    for (var index = 0; index < outputs.length; index++) {
      var item = outputs[index]
      var source = document.querySelector(item.getAttribute('source'));
      if (source) {
        if (item === e.target) {
          source.value = item.value
          emit(source, 'input')
          emit(source, 'change')
        }

        if (source === e.target) {
          item.value = source.value
        }
      }
    }
  }
  
  document.addEventListener('change', onChange)
  document.addEventListener('input', onChange)
}());

<div id="div">
  <input name="example" type="range" max="2250000" min="-200000" value="0" step="50000">
  <input id="example-value" type="number" max="2250000" min="-200000" value="0" step="50000" source="[name=example]">
  <br>

  <input name="example2" type="range" max="2240000" min="-160000" value="0" step="50000">
  <input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
  <input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
  <br>
  
  <input name="example3" type="range" max="20" min="0" value="10" step="1">
  <select source="[name=example3]">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
  </select>
  <br>
  
</div>
<br>

【讨论】：

【解决方案6】：

更好的方法是在输入本身上捕获输入事件而不是整个形式（性能方面）：

<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（根据 Ryan 的评论添加了id）。

【讨论】：

在 Firefox 27 中，这对我不起作用，直到我也为输出添加了 id="amount"。
这应该可以在没有 id 的情况下工作：oninput="this.form.amount.value=this.value"
这可行，但我如何获得当前值并在页面刷新时显示它？ :-/

【解决方案7】：

如果你使用多滑块，并且你可以使用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，您将在拖动范围时收到事件。

【讨论】：

【解决方案8】：

如果您仍在寻找答案，则可以使用 input type="number" 代替 type="range" min max work（如果按该顺序设置）：
1个名字
2-最大长度
3 尺寸
4分钟
最多 5 个
直接复制吧

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

【讨论】：

这是错误的，它没有按照主题发起者的要求进行操作。

【解决方案9】：

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

【讨论】：

错误：{ "message": "Uncaught ReferenceError: getvalor is not defined", "filename": "stacksnippets.net/js", "lineno": 12, "colno": 169 }

【解决方案10】：

这使用 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="">

【讨论】：

但是在没有 javascript 或 jquery 的情况下有没有办法做到这一点？
这是来自 mobile-web-app.blogspot.com/2012/03/… ，仍然是 javascript。 codeRange 5
有没有人认为提供盲滑块是缺乏的。确实，提供精美的小部件不是基本标准的作用，但显示所选值是此小部件的核心，所以我认为（可选）以基本形式显示数字，例如滑块手柄顶部的工具提示做出更好的设计。
@BaselShishani 完全同意，不确定背后的思考过程是什么。
@BaselShishani：根据MDN：“范围：用于输入精确值不重要的数字的控件。”。鉴于该假设，不显示确切值是有道理的。但在实践中，它也可能用于选择精确值。

【解决方案11】：

如果您希望当前值显示在滑块下方并随之移动，请尝试以下操作：

<!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 键相同。

【讨论】：

【解决方案12】：

具有可编辑输入的版本：

<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/

【讨论】：

将表单变量替换为this.nextElementSibling 或this.previousElementSibling 并将oninput 替换为onchange 以获得在表单之外工作的版本。 jsfiddle.net/Xjxe6/94
很棒的答案！