The value of the input range will be counted, but not up

Question

*** EDIT: solution found. Adding the necessary content for future users who are faced with this.

I am completely fixated on why my JS can make this widget count by single integers, but when it counts it, it’s as if it combines the “1” at the end of my window.

You may notice this right away:

markup here:

<input type="text" name="volume" id="delta" class="change" value="50" />

<input id="slider" type="range" min="0" max="100" step=".2" value="50" />

js here:

var timeout, tabMinus = $('#minus'), tabPlus = $('#plus');

//slider functionality
$('#slider').mouseup(function() {
    $('#delta').val($('#slider').val());
});

$('#delta').keyup(function() {
   $('#slider').val($('#delta').val());
});

//plus-minus tab functionality
tabMinus.mouseup(function() {
    $('#delta').val($('#slider').val() - 1);
    $('#slider').val($('#delta').val() - .2);
});

tabPlus.mouseup(function() {
    $('#delta').val($('#slider').val() + 1);
    $('#slider').val($('#delta').val() + .2);
    console.log($('#delta').val());
});

Also, bonus points, if there is a way to see LIVE updates when dragging the scroller, and not replay with the mouse.

Here is the fiddle: https://jsfiddle.net/jnurbina/rvf8j6te/1/

Answer 1

Updated fiddle

, .val() , , , , parseInt() parseFloat():

//plus-minus tab functionality
tabMinus.mouseup(function() {
    $('#delta').val(parseInt($('#slider').val()) - 1);
    $('#slider').val(parseFloat($('#delta').val()) - .2);
});

tabPlus.mouseup(function() {
    $('#delta').val(parseInt($('#slider').val()) + 1);
    $('#slider').val(parseFloat($('#delta').val()) + .2);
});

, , , , - , . ( -, , — — ). , JavaScript . + , () (). , , , , -.