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

114

我正在建立一个我要使用范围滑块的网站（我知道它仅支持Webkit浏览器）。

我已经将其完全集成并且可以正常工作。但是我想使用a textbox来显示当前的幻灯片值。

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

我可以只使用CSS还是使用html。我想避免JQuery。可能吗？

html  css  range 
— 尼拉·乔汉（Niraj Chauhan）
source
1
没有JavaScript，您将无法做到这一点。
— mrtsherman'4
3
你可以几乎做到这一点，使用的CSS :before/ :after，content并且attr()，像这样。但是，：before /：after伪元素实际上吞噬了滑块的某些范围（尽管可能是可修复的），最重要的是，如果操纵了滑块，则不会更新这些值。不过，我认为将其留在这里会很有趣。将来有可能。
— waldyrious
3
修复@waldir的解决方案会导致jsfiddle.net/RjWJ8，尽管它仍使用javascript从属性更新value属性。
— user1277170 2014年

Answers:

110

这使用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="">
展开摘要

— 埃勒波德
source
5
但是有没有JavaScript或jQuery吗？
— Niraj Chauhan '04年
15
这是来自mobile-web-app.blogspot.com/2012/03/…，仍然是javascript。code<label for =“ rangeinput”>范围</ label> <input id =“ rangeinput” type =“ range” min =“ 0” max =“ 10” value =“ 5” onchange =“ rangevalue.value = value”> </ input> <output id =“ rangevalue”> 5 </ output>
— ejlepoud 2012年
46
还有人认为缺少提供盲目的滑块吗？的确，提供精美的小部件不是基本标准的作用，但显示所选值是此小部件的核心，因此，我认为（可选）以基本形式（例如，在滑块手柄顶部显示工具提示）显示数字会做出更好的设计。
— 巴塞尔Shishani 2013年
1
@BaselShishani不能同意，不能完全确定背后的想法是什么。
— Noz
2
@BaselShishani：根据MDN：“范围：用于输入其确切值不重要的数字的控件。”。根据该假设，没有确切的值是有意义的。但实际上，它也可能会用于选择精确值。
— bodo 2015年
166

对于那些仍在寻找没有单独的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演示

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

更新：

它仍然是用HTML编写的Javascript，您可以使用以下JS代码替换绑定：

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

在现代浏览器中都支持使用元素的ID或名称。

— 拉胡尔河
source
1
+1知道我对<output>的了解。唯一的问题是EI不支持它。（W3School）w3schools.com/tags/tryit.asp?filename=tryhtml5_output
— radbyx 2014年
4
它仍然是Javascript，在表单元素上绑定oninput比在input元素本身上绑定更糟糕。
— cuixiping 2014年
2
@cuixiping，我们可以将oninput绑定到元素上而不是形式上，我只是这样做以显示示例。
— Rahul R.
原谅这个迟来的菜鸟问题，但是处理程序如何通过它们的HTML名称引用rangeInput和amount？
— rep_movsd
@rep_movsd，它与this.formName.rangeInput或this.formName.amount相同。表单使用元素的名称访问元素。但是我不确定100％，
— Rahul R.
39

输入可编辑的版本：

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

— d1毫米
source
6
用this.nextElementSibling或替换表单变量，this.previousElementSibling并用onchange替换oninput以获得在表单外部工作的版本。jsfiddle.net/Xjxe6/94
— Domino
32

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

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

这是一个小提琴（id根据Ryan的评论进行了添加）。

— 伊拉娜·哈基姆（Ilana Hakim）
source
3
在Firefox 27中，这对我不起作用，直到我也添加id="amount"了输出。
— 瑞安
这应该在没有id的情况下有效：oninput="this.form.amount.value=this.value"
— d1Mm 2014年
1
这有效，但是如何获取当前值并在页面刷新时显示它？：-/
— user2513846'9
14

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

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

— 药an
source
6

如果您使用多个幻灯片，并且可以使用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">
展开摘要

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

— 安东尼奥·阿尔梅达
source
4

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

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

— Gengns
source
1
这是最好的答案……
— Ayo Adesina
2

对于不关心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>
— 六角
source
1

我有一个涉及（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>
展开摘要

— 云禅
source
0 

<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>
展开摘要

— 路易斯
source
1
错误：{“消息”：“未捕获的ReferenceError：未定义getvalor”，“文件名”：“ stacksnippets.net/js ”，“ lineno”：12，“ colno”：169}
— Darush
0

试试这个 ：

 <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();
  });
— 哺乳动物
source
-3

如果您仍在寻找答案，则可以按以下顺序使用输入type =“ number”代替type =“ range”最小最大工作量：
1-name
2-maxlength
3-size
4-min
5-max
just复制它

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />
— 京亚当
source
1
这是错误的，它不执行主题启动程序要求的操作。
— bolvo
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.