HTML Range input increase/decrease value problems

Question

I have these three elements in my HTML:

<button id="left" >Föregående</button>
<input id="animSlider" type="range" min="0" max="0" step="1" value="0" /> //THE MAX VALUE IS SET DYNAMICLY ON PAGE LOAD, I.E. NOT ZERO
<button id="right">Nästkommande</button>

Controlling the value of the input slider is these two listeners/handlers in jquery:

$('#left').click( function () {
document.getElementById("animSlider").value -= 1;
});

$('#right').click( function () {
document.getElementById("animSlider").value += 1; 
});

For some reason the handler for "previous" ( #left ) works fine, it decreases the value by one. But, the "next" ( #right ) handler, the value increases like this: 1,2, middle of slider, end of slider. I know, there might be some conflict in my code, that I didn't post but I have checked and can't find any connection. The only place where the value is involved, is in these two handlers!

So my question is: Is there something I'm missing in handling range input values? Is it the +=/-= that differs in JavaScript? Is there a conflict in using jQuery together with JavaScript in this way?

Answer 1

Demo

Value is a String . Convert it to a number.otherwise it increase as 0,01,011 ... instead of 0,1,2.. .However - minus automatically convert strings in to numbers because string - string doesn't make sense. That's why only previous button is working. Number(string); covert string to a number.you can also use parseInt(string)

$('#right').click(function() {
  document.getElementById("animSlider").value = Number(document.getElementById("animSlider").value)+1;
});