Marcus Karlsson Marcus Karlsson - 1 month ago 6
HTML Question

HTML Range input increase/decrease value problems

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

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