javascript - 带直接数字输入的范围 slider

Question

是否可以在表单字段中使用范围 slider ，并允许用户通过键入数字来输入值，即在同一表单字段上使用 input type="range"和 input type="number"哪个使用覆盖另一个？

好的，为了响应以下内容，这是我的代码:

<label for="monday">Monday Sales Target - $<span id="monday"></span></label>
<input type="range" min="0" max="5000" id="monday" name="monday" value="0" step="50" oninput="showValue1(this.value)" />

JavaScript:

function showValue1(newValue) { 
    document.getElementById("monday").innerHTML=newValue;
}

目前，范围 slider 会发生变化并输出在标签末尾选择的数字，但是一些用户提示 slider 太繁琐，并且希望通过数字输入直接输入数字。这可能吗？

Answer 1

您可以使用 onkeyup 事件和 input 来根据 input 值更改 range 值，这是您需要的:

HTML:

JS:

function changeRangeValue(val){
    document.getElementById("range").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
    showValue1(val);
}

演示:

function showValue1(newValue) { 
    document.getElementById("monday").innerHTML= newValue;
}

function changeRangeValue(val){
    document.getElementById("range").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
    showValue1(val);
}

function changeInputValue(val){
    document.getElementById("number").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
    showValue1(val);
}

<input type="number" id="number" min="0" max="5000" onkeyup="changeRangeValue(this.value)"/> 
<br />

<label for="monday">Monday Sales Target - $<span id="monday"></span></label>

<input type="range" min="0" max="5000" id="range" name="monday" value="0" step="50" oninput="changeInputValue(this.value)" />

注意:

您不能为 HTML 中的多个元素设置相同的 id。