how to increase and decrease the value of range slider input on clicking next and prev button (vanilla JavaScript)

Question

this is the code How to increase/ decrease value by 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 code

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
})

I tried increasing the value on click but it doesnt work

Answer 1

Use step attribute

    <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

You should setAttribute method:

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)
})