如何在单击下一个和上一个按钮时增加和减少范围 slider 输入的值（香草 JavaScript）

Question

这是代码如何将值增加/减少 20？

<div class="slider">
    <input type="range" min="1" max="100" value="0" class="img__slider" id="myRange">
</div>

<div>
    <button id="prev">Prev</button>
    <button id="next">Next</button>
</div>

js代码

const prevbtn = document.querySelector('#prev');
const nextbtn = document.querySelector('#next');
const rangeValue = document.querySelector('#myRange');

nextbtn.addEventListener('click', () => {
  let getValue = rangeValue.value;

  getValue += 20
})

prevbtn.addEventListener('click', () => {
  let getValue = rangeValue.value;

  getValue -= 20
})

我尝试增加点击值，但它不起作用

Answer 1

使用步骤属性

    <input type="range" min="1" max="100" value="0" step="20"class=" img__slider" id="myRange">
</div>

<div>
    <button>Prev</button>
    <button>Next</button>
</div>

Answer 2

你应该setAttribute方法：

const prevbtn = document.querySelector('#prev');
const nextbtn = document.querySelector('#next');
const rangeValue = document.querySelector('#myRange');

nextbtn.addEventListener('click', () => {
  rangeValue.setAttribute('value', rangeValue.value + 20)
})

prevbtn.addEventListener('click', () => {
  rangeValue.setAttribute('value', rangeValue.value - 20)
})