Recalculate value when changing input type = range

Question

Recalculate value when changing input type = range

Navigation

#1 by (0 votes)

1

I need your help to solve a problem.

I have an input type range which, as it is changed, places the value in an output, until here everything works fine, with this value I perform an operation whose result is reflected in a span but the problem is that each result one in front of the other and what I need is that when changing the range recalculate and show the result according to its last location.

This is the input type = range and the output where I charge the value:

<input oninput="valor_rango.value=Number(rango.value).toLocaleString('es-ES')" type="range" min="15000" max="10000" step="1000" value="25000" id="rango">
 <p>Valor: <output id="valor_rango" for="rango">25000</output></p>
 <p><span id="total"></span></p>

With this scrip I made the operation:

     $(document).on('change', 'input[type="range"]', function() {

            var valorBase = $('#rango').val();
            var calculo = Math.round((valorBase * 2.3) / 100);
            $('#calculo').after(total);
            total = parseInt(valorBase) + parseInt(calculo);
            $('#total').after(total);

        });

Thank you in advance for the help

javascript html5

asked by car-onte 20.11.2018 в 20:49

source

1 answer

Equivalent FileInputStream in PHP Pass objects between Android activities

score 0 · Accepted Answer

You just have to change .after by .html like this:

$(document).on('change', 'input[type="range"]', function() {

            var valorBase = $('#rango').val();
            var calculo = Math.round((valorBase * 2.3) / 100);
            $('#calculo').html(total);
            total = parseInt(valorBase) + parseInt(calculo);
            $('#total').html(total);

        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input oninput="valor_rango.value=Number(rango.value).toLocaleString('es-ES')" type="range" min="15000" max="100000" step="1000" value="25000" id="rango">
 <p>Valor: <output id="valor_rango" for="rango">25000</output></p>
 <p><span id="total"></span></p>