Question

谢谢你的时间！

我看起来像这样：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>

谢谢大家！

Answer 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

Answer 2

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

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>

Answer 3

这是一个更简单的溶液

＆＃13;

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

＆＃13;

使用文本框输入范围

3 个答案: