JSFiddle - React, Tailwind, and code Playground

HTML

<input type="range" name="fum-dep" id="fum-dep-1" min="0" max="10">
<input type="range" name="fum-dep" id="fum-dep-2" min="0" max="10">
<input type="range" name="fum-dep" id="fum-dep-3" min="0" max="10">

<p id="total"></p>

JavaScript

$('input[type=range]').on('change', function(){
		var total = 0;
    $('input[type=range]').each(function() {
  			total += parseInt($(this).val());
		});
    $('#total').html(total);
});