how to increase and decrease the value of range slider input on clicking next and prev button (vanil-CodePudding

this is the code How to increase/ decrease value by 20?

<div >
    <input type="range" min="1" max="100" value="0"  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

CodePudding user response：

Use step attribute

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

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

CodePudding user response：

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