如何在單擊下一個和上一個按鈕時增加和減少范圍 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)
})