entityMap|blocks|key|fakvl|text|它使用javascript，而不是直接使用jquery。这可能会帮助你开始。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5iuh1|​|387pt|function+updateTextInput(val)+{
++++++++++document.getElementById('textInput').value=val;+
++++++++}|code-block|syntax|javascript|3fgt1^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|L|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|M|9|@]|A|@]|B|$H|I]]|$2|J|4|D|6|7|8|N|9|@]|A|@]|B|$]]]]

<p>This uses javascript, not jquery directly. It might help get you started.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function updateTextInput(val) {
          document.getElementById('textInput').value=val; 
        }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);"&gt;
&lt;input type="text" id="textInput" value=""&gt;</code></pre>
</div>
</div>
</p>


entityMap|blocks|key|6ej31|text|对于那些仍然在寻找没有单独的javascript代码的解决方案的人。如果不编写javascript或jquery函数，就没有什么简单的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|57c0|​|b7jtv|24|code-block|syntax|javascript|evcvs|eh1hi|JsFiddle演示|1811u|如果您想在文本框中显示值，只需将输出更改为输入即可。|5r0qt|注意事项：|df6a4|它仍然是在你的html中编写的Javascript，我们可以在js中写一些类似的东西来做类似的事情：|3v611|document.registrationForm.ageInputId.oninput+=+function(){
++++document.registrationForm.ageOutputId.value+=+document.registrationForm.ageInputId.value;
+}|1lk9p|也可以使用name来代替元素的id，这两种方法在现代浏览器中都是受支持的。^0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|W|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|X|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|Y|9|@]|A|@]|B|$H|I]]|$2|J|4|D|6|7|8|Z|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|10|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|11|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|12|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|13|9|@]|A|@]|B|$]]|$2|S|4|T|6|G|8|14|9|@]|A|@]|B|$H|I]]|$2|U|4|V|6|7|8|15|9|@]|A|@]|B|$]]]]

<p>For those who are still searching for a solution without a separate javascript code. There is little easy solution without writing a javascript or jquery function:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value"&gt;
&lt;output&gt;24&lt;/output&gt;</code></pre>
</div>
</div>
</p>
<p><a href="https://jsfiddle.net/w8bw4dte/" rel="noreferrer"><strong>JsFiddle Demo</strong></a></p>
<p>If you want to show the value in text box, simply change output to input.</p>
<hr />
<p><strong>Point to note:</strong>
It is still Javascript written within your html, we can write something like below in js to do similar thing:</p>
<pre><code> document.registrationForm.ageInputId.oninput = function(){
    document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
 }
</code></pre>
<p>Instead of element's id, name could also be used, both are supported in modern browsers.</p>


entityMap|blocks|key|ccbj4|text|具有可编辑输入的版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|aterd|http://jsfiddle.net/Xjxe6/^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

<p>version with editable input:</p>

<pre><code>&lt;form&gt;
    &lt;input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" /&gt;
    &lt;input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" /&gt;
&lt;/form&gt;
</code></pre>

<p><a href="http://jsfiddle.net/Xjxe6/" rel="noreferrer">http://jsfiddle.net/Xjxe6/</a></p>


entityMap|blocks|key|67ljo|text|一种更好的方法是在输入本身而不是整个表单上捕获输入事件(性能方面)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2bgac|这里有一个|2l7r0|小提琴|bebfr|(使用|8kdb1|根据Ryan的评论添加)。^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|L|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|M|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|N|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|O|9|@]|A|@]|B|$]]]]

<p>an even better way would be to catch the input event on the input itself 
rather than on the whole form (performance wise) :</p>

<pre><code>&lt;input type="range" id="rangeInput" name="rangeInput" min="0" max="20" value="0"
       oninput="amount.value=rangeInput.value"&gt;                                                       

&lt;output id="amount" name="amount" for="rangeInput"&gt;0&lt;/output&gt;
</code></pre>

<p>Here's a <a href="http://jsfiddle.net/gleezer/L10r5zvv/1/" rel="noreferrer">fiddle</a> (with the <code>id</code> added as per Ryan's comment).</p>


entityMap|blocks|key|e1kjr|text|如果希望当前值显示在滑块下方并随滑块一起移动，请尝试执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|21ahl|​|9jup1|MySliderValue



++MySliderValue

++
++++
++++
++++
+++++
++

++
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+%2B+'px';
++myValue.parentElement.style.top+=+myRange.offsetHeight+%2B+'px';
++myValue.innerHTML+=+myRange.value+%2B+'+'+%2B+myUnits;

++myRange.oninput+=function(){
++++let+px+=+((myRange.valueAsNumber+-+parseInt(myRange.min))+*+off)+-+(myValue.offsetWidth+/+2);
++++myValue.innerHTML+=+myRange.value+%2B+'+'+%2B+myUnits;
++++myValue.parentElement.style.left+=+px+%2B+'px';
++};|code-block|syntax|javascript|edeid|7nt8j|请注意，这种类型的HTML输入元素有一个隐藏的功能，比如当元素具有焦点时，您可以使用左/右/下/上箭头键移动滑块。Home/End/PageDown/PageUp键也是如此。^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|M|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|N|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|O|9|@]|A|@]|B|$H|I]]|$2|J|4|D|6|7|8|P|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|Q|9|@]|A|@]|B|$]]]]

<p>If you want your current value to be displayed beneath the slider and moving along with it, try this:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;MySliderValue&lt;/title&gt;

&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;MySliderValue&lt;/h1&gt;

  &lt;div style="position:relative; margin:auto; width:90%"&gt;
    &lt;span style="position:absolute; color:red; border:1px solid blue; min-width:100px;"&gt;
    &lt;span id="myValue"&gt;&lt;/span&gt;
    &lt;/span&gt;
    &lt;input type="range" id="myRange" max="1000" min="0" style="width:80%"&gt; 
  &lt;/div&gt;

  &lt;script type="text/javascript" charset="utf-8"&gt;
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';
  };
  &lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Note that this type of HTML input element has one hidden feature, such as you can move the slider with left/right/down/up arrow keys when the element has focus on it. The same with Home/End/PageDown/PageUp keys.</p>


entityMap|blocks|key|33gkp|text|如果您正在使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|e1da0|多张幻灯片|5qjre|，您可以使用jQuery，您可以执行以下操作来轻松处理多个滑块：|63le1|​|7fn5j|function+updateRangeInput(elem)+{
++$(elem).next().val($(elem).val());
}|code-block|syntax|javascript|a3jnm|input+{+padding:+8px;+border:+1px+solid+#ddd;+color:+#555;+display:+block;+}
input[type=text]+{+width:+100px;+}
input[type=range]+{+width:+400px;+}|e6dje|fc99f|此外，通过使用|92ogt|在上，您将在拖动范围时收到事件。^0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|U|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|V|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|W|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|X|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|Y|9|@]|A|@]|B|$L|M]]|$2|N|4|O|6|K|8|Z|9|@]|A|@]|B|$L|M]]|$2|P|4|H|6|7|8|10|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|11|9|@]|A|@]|B|$]]|$2|S|4|T|6|7|8|12|9|@]|A|@]|B|$]]]]

<p>If you're using <strong>multiple slides</strong>, and you can use jQuery, you can do the follow to deal with multiple sliders easily:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function updateRangeInput(elem) {
  $(elem).next().val($(elem).val());
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>input { padding: 8px; border: 1px solid #ddd; color: #555; display: block; }
input[type=text] { width: 100px; }
input[type=range] { width: 400px; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="0"&gt;
&lt;input type="text" value="0"&gt;

&lt;input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="50"&gt;
&lt;input type="text" value="50"&gt;</code></pre>
</div>
</div>
</p>

<p>Also, by using <code>oninput</code> on the <code>&lt;input type='range'&gt;</code> you'll receive events while dragging the range.</p>


entityMap|blocks|key|20m9j|text|最短版本，不带|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4ltue|5dok5|或外部JavaScript。|41le8|​|fj837|dd6i3|解释|6lkv9|如果要从|87vn2|您通常使用|3dj6h|可以从|a34uj|而不是使用|2jdha|(我们利用我们已经在使用的东西)|oiu0|将上面的例子与这个有效但更复杂和更长的答案进行比较：|bj8og|用最短的答案：|a84op|我们避免使用|6nbmj|，对于新手来说，JS中的一些奇怪的东西|6ikn0|我们避免了关于在DOM中连接同级的新概念|ben95|方法中避免过多的属性。|3cpa|放置|ftgq6|在|143un|备注|9osc8|在这两个示例中，我们都不需要添加|n5sa|等于时的值|cng5q|删除JavaScript|5nf42|关键字使其成为一种更好的语言^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|1K|9|@]|A|@]|B|$]]|$2|C|4|-4|6|7|8|1L|9|@]|A|@]|B|$]]|$2|D|4|E|6|7|8|1M|9|@]|A|@]|B|$]]|$2|F|4|G|6|7|8|1N|9|@]|A|@]|B|$]]|$2|H|4|G|6|7|8|1O|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|1P|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|1Q|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|1R|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|1S|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|1T|9|@]|A|@]|B|$]]|$2|S|4|T|6|7|8|1U|9|@]|A|@]|B|$]]|$2|U|4|V|6|7|8|1V|9|@]|A|@]|B|$]]|$2|W|4|X|6|7|8|1W|9|@]|A|@]|B|$]]|$2|Y|4|Z|6|7|8|1X|9|@]|A|@]|B|$]]|$2|10|4|11|6|7|8|1Y|9|@]|A|@]|B|$]]|$2|12|4|13|6|7|8|1Z|9|@]|A|@]|B|$]]|$2|14|4|15|6|7|8|20|9|@]|A|@]|B|$]]|$2|16|4|17|6|7|8|21|9|@]|A|@]|B|$]]|$2|18|4|19|6|7|8|22|9|@]|A|@]|B|$]]|$2|1A|4|1B|6|7|8|23|9|@]|A|@]|B|$]]|$2|1C|4|1D|6|7|8|24|9|@]|A|@]|B|$]]|$2|1E|4|1F|6|7|8|25|9|@]|A|@]|B|$]]|$2|1G|4|1H|6|7|8|26|9|@]|A|@]|B|$]]|$2|1I|4|1J|6|7|8|27|9|@]|A|@]|B|$]]]]

<p>Shortest version without <code>form</code>, <code>min</code> or external JavaScript.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="range" value="0" max="10" oninput="num.value = this.value"&gt;
&lt;output id="num"&gt;0&lt;/output&gt;</code></pre>
</div>
</div>
</p>
<p><strong>Explanation</strong></p>
<p>If you wanna retrieve the value from the <code>output</code> you commonly use an <code>id</code> that can be linked from the <code>oninput</code> instead of using <code>this.nextElementSibling.value</code> (we take advantage of something that we are already using)</p>
<p>Compare the example above with this valid but a little more complex and long answer:</p>
<pre><code>&lt;input id=&quot;num&quot; type=&quot;range&quot; value=&quot;0&quot; max=&quot;100&quot; oninput=&quot;this.nextElementSibling.value = this.value&quot;&gt;
&lt;output&gt;0&lt;/output&gt;
</code></pre>
<p>With the shortest answer:</p>
<ul>
<li>We avoid the use of <code>this</code>, something weird in JS for newcomers</li>
<li>We avoid new concept about connecting siblings in the DOM</li>
<li>We avoid too much attributes in the <code>input</code> placing the <code>id</code> in the <code>output</code></li>
</ul>
<p><strong>Notes</strong></p>
<ul>
<li>In both examples we don't need to add the <code>min</code> value when equal to
<code>0</code></li>
<li>Removing JavaScript’s <code>this</code> keyword makes it a better language</li>
</ul>


entityMap|blocks|key|663f|text|对于那些不关心jquery使用的人，这里有一个不使用任何id的捷径|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2hunm|userAvatar+:
++
++1|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

<p>For people don't care about jquery use, here is a short way without using any id</p>

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


entityMap|blocks|key|6s333|text|我有一个涉及(Vanilla)+JavaScript的解决方案，但仅作为一个库。您必须包含它一次，然后您所需要做的就是设置适当的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7p20v|数字输入的属性。|52t5v|The+The+The|e38vo|属性应为|5jcm6|要侦听的范围输入的选择器。|76j3f|它甚至可以与selectcs一起工作。而且它可以与多个监听器一起工作。它在另一个方向上工作:改变数字输入，范围输入将会调整。它将对稍后添加到页面上的元素起作用(请检查|a1n78|https://codepen.io/HerrSerker/pen/JzaVQg|25jv2|为此)|cnvu3|在Chrome、Firefox、Edge和IE11上测试|48k65|​|ddcua|;(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"+%2B+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%2B%2B)+{
++++++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)
}());|code-block|syntax|javascript|aqs3p|0
++++1
++++2
++++3
++++4
++++5
++++6
++++7
++++8
++++9
++++10
++++11
++++12
++++13
++++14
++++15
++++16
++++17
++++18
++++19
++++20|465k6^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|12|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|13|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|14|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|15|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|16|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|17|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|18|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|19|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|1A|9|@]|A|@]|B|$]]|$2|S|4|T|6|7|8|1B|9|@]|A|@]|B|$]]|$2|U|4|V|6|W|8|1C|9|@]|A|@]|B|$X|Y]]|$2|Z|4|10|6|W|8|1D|9|@]|A|@]|B|$X|Y]]|$2|11|4|T|6|7|8|1E|9|@]|A|@]|B|$]]]]

<p>I have a solution that involves (Vanilla) JavaScript, but only as a library. You habe to include it once and then all you need to do is set the appropriate <code>source</code> attribute of the number inputs. </p>

<p>The <code>source</code> attribute should be the <code>querySelectorAll</code> selector of the range input you want to listen to.</p>

<p>It even works with selectcs. And it works with multiple listeners. And it works in the other direction: change the number input and the range input will adjust. And it will work on elements added later onto the page (check <a href="https://codepen.io/HerrSerker/pen/JzaVQg" rel="nofollow noreferrer">https://codepen.io/HerrSerker/pen/JzaVQg</a> for that)</p>

<p>Tested in Chrome, Firefox, Edge and IE11</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>;(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 &lt; 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)
}());</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="div"&gt;
  &lt;input name="example" type="range" max="2250000" min="-200000" value="0" step="50000"&gt;
  &lt;input id="example-value" type="number" max="2250000" min="-200000" value="0" step="50000" source="[name=example]"&gt;
  &lt;br&gt;

  &lt;input name="example2" type="range" max="2240000" min="-160000" value="0" step="50000"&gt;
  &lt;input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]"&gt;
  &lt;input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]"&gt;
  &lt;br&gt;
  
  &lt;input name="example3" type="range" max="20" min="0" value="10" step="1"&gt;
  &lt;select source="[name=example3]"&gt;
    &lt;option value="0"&gt;0&lt;/option&gt;
    &lt;option value="1"&gt;1&lt;/option&gt;
    &lt;option value="2"&gt;2&lt;/option&gt;
    &lt;option value="3"&gt;3&lt;/option&gt;
    &lt;option value="4"&gt;4&lt;/option&gt;
    &lt;option value="5"&gt;5&lt;/option&gt;
    &lt;option value="6"&gt;6&lt;/option&gt;
    &lt;option value="7"&gt;7&lt;/option&gt;
    &lt;option value="8"&gt;8&lt;/option&gt;
    &lt;option value="9"&gt;9&lt;/option&gt;
    &lt;option value="10"&gt;10&lt;/option&gt;
    &lt;option value="11"&gt;11&lt;/option&gt;
    &lt;option value="12"&gt;12&lt;/option&gt;
    &lt;option value="13"&gt;13&lt;/option&gt;
    &lt;option value="14"&gt;14&lt;/option&gt;
    &lt;option value="15"&gt;15&lt;/option&gt;
    &lt;option value="16"&gt;16&lt;/option&gt;
    &lt;option value="17"&gt;17&lt;/option&gt;
    &lt;option value="18"&gt;18&lt;/option&gt;
    &lt;option value="19"&gt;19&lt;/option&gt;
    &lt;option value="20"&gt;20&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;
  
&lt;/div&gt;
&lt;br&gt;</code></pre>
</div>
</div>
</p>


entityMap|blocks|key|8ovsc|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|839k6|和在|kmgt|jQuery|ftaab|部分：|1smnj|$('#when_change_range').change(function(){
+document.getElementById('text_for_show_range').value=$(this).val();
++});|code-block|syntax|javascript^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|P|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|Q|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|R|9|@]|A|@]|B|$L|M]]]]

<p>Try This :</p>

<pre><code> &lt;input min="0" max="100" id="when_change_range" type="range"&gt;
 &lt;input type="text" id="text_for_show_range"&gt;
</code></pre>

<p>and in <strong>jQuery</strong> section :</p>

<pre><code> $('#when_change_range').change(function(){
 document.getElementById('text_for_show_range').value=$(this).val();
  });
</code></pre>


entityMap|blocks|key|u6ur|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|63l5v^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|D|9|@]|A|@]|B|$]]|$2|C|4|5|6|7|8|E|9|@]|A|@]|B|$]]]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form name="registrationForm"&gt;
    &lt;input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="10" onchange="getvalor(this.value);" oninput="ageOutputId.value = ageInputId.value"&gt;
    &lt;input type="text" name="ageOutputName" id="ageOutputId"&gt;&lt;/input&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


entityMap|blocks|key|3q1ih|text|如果你还在寻找答案，你可以用input+type="number“代替type="range”min+max+work，如果它是按这个顺序设置的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5rbd8|1-名称|a0a82|2-最大长度|4t9sv|3号|2vs59|4分钟|8qsqn|最多5个|ds82r|直接复制就行了^0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|O|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|P|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|Q|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|R|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|S|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|T|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|U|9|@]|A|@]|B|$]]]]

<p>if you still looking for the answer you can use input type="number" in place of type="range" min max work if it set in that order:<br>
1-name<br>
2-maxlength<br>
3-size<br>
4-min<br>
5-max<br>
just copy it</p>

<pre><code>&lt;input  name="X" maxlength="3" size="2" min="1" max="100" type="number" /&gt;
</code></pre>


<p>I am making a website where I want to use range slider(I know it only supports webkit browsers).</p>

<p>I have integrated it fully and works fine. But I would like to use a <code>textbox</code> to show the current slide value.</p>

<p>I mean if initially the slider is at value 5, so in text box it should show as 5, when I slide the value in text box should change.</p>

<p>Can I do this using only <code>CSS</code> or <code>html</code>. I want to avoid <code>JQuery</code>. Is it possible?</p>


HTML5 input type range show range value

jQuery

 我正在制作一个网站，我想使用范围滑块(我知道它只支持webkit浏览器)。 我已经完全集成了它，并且工作得很好。但是我想使用一个 若要显示当前幻灯片值，请执行以下操作。 我的意思是，如果最初滑块的值是5，那么在文本框中它应该显示为5，当我滑动文本框中的值时，它应该会改变。 我可以仅使用以下命令来完成此操作吗？ 或者 ..。我想避免 ..。有可能吗？

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

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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