带文本框的范围输入[关闭]答案

【问题标题】：Range input with textbox [closed]带文本框的范围输入[关闭]
【发布时间】：2017-07-11 14:44:03
【问题描述】：

感谢您的宝贵时间！

我看起来像这样：Demo1。 - http://www.html5tutorial.info/html5-range.php

我有这个，但它不工作。

<form>
 <input id="valR" max="65" min="1" step="1" type="range" value="1">
 <input id="rangeValue" type="text" min="1" max="65" value="1" oninput="this.form.valR.value=this.value"></form>
<div class="tesxsss2"><div id="taxa">Taxa FS Connect: $15.00</div>
<div id="shipping">Priority Mail (frete): 43.51</div>

谢谢大家！

【问题讨论】：

标签： javascript html input range

【解决方案1】：

您非常接近此代码。唯一的问题是您将 oninput 属性放在了错误的元素上。

您想对范围滑块的变化做出反应，而不是值框。

将其移至 valR 元素（并更改 id 以反映我们现在正在填充 rangeValue）应该可以修复您的代码：

<form>
    <input id="valR" max="65" oninput="this.form.rangeValue.value=this.value" min="1" step="1" type="range" value="1">
    <input id="rangeValue" type="text" oninput="this.form.valR.value=this.value"  min="1" max="65" value="1" >
</form>

check out the pen here

【讨论】：

谢谢！但不像我想要的那样工作。因为如果我尝试更改“RangeValue”中的值，拇指不会在一起。你能明白吗？就像，如果我改变值，拇指也需要改变。但我真的很感激！谢谢！
这只是在你的 rangeValue 元素上放置一个 on input 处理程序来做同样的事情 - 请参阅更新的答案

【解决方案2】：

这是一个更简单的解决方案

<input id="valR" max="65" min="1" step="1" type="range" value="1" onchange="this.nextElementSibling.innerText = this.value;">
<span>1</span>

【讨论】：

【解决方案3】：

您的脚本中缺少您..请找到以下代码。您的滑块正在工作

let rangeValueElement = document.querySelector('#range');
document.querySelector('input#valR').addEventListener('change', showVal);

function showVal() {
  rangeValueElement.innerText = this.value;
 
}

<input id="valR" max="65" min="1" step="1" type="range" value="1">

<span id="range" class="tesxss">1</span>

【讨论】：