【input [ type = range ]滚动条的值增减量错误。 _节点操作】

input [ type = range ]滚动条的值增减量错误。

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

节点操作

详细描述

截图

代码

<div class="adjust">
                <p class="players">玩家人数 <input type="number" id="input" value="6" title="游戏人数为4~18人"> 人 <span class="orange">游戏人数为4~18人</span></p>
                <div class="slide clearfix">
                    <button class="minus lfloat" onclick="numMinus()"></button>
                    <input type="range" id="range" class="lfloat" name="num" min="4" max="18" value="6" title="人数范围">
                    <button class="plus lfloat" onclick="numPlus()"></button>
                </div>
            </div>

var inputValue = document.getElementById("input");
var rangeValue = document.getElementById("range");
// 给滚动条绑定“减少”事件
function numMinus () {
    rangeValue.value = rangeValue.value - 1;
    inputValue.value = rangeValue.value;
    console.log('value=' + rangeValue.value);
}
// 给滚动条绑定“增加”事件
function numPlus () {
    rangeValue.value = rangeValue.value + 1;
    inputValue.value = rangeValue.value;
    console.log('value=' + rangeValue.value);
}
// 给 input 绑定事件监听，即时改变数据
inputValue.addEventListener('input',pushValue);
rangeValue.addEventListener('input',getValue);

编辑于2024-11-18