hitung range

<html>
<head>
<title>Perhitungan</title>
</head>
<body>
<div class="perhitungan">
    <li>
    <label for ="nama"> Harga :</label>
  <input type="range" min="0" max="100" name="vol" id="vol" oninput="nilai(value)">
<output for="vol" id="volume">0</output>

<script>
    function nilai(vol) {
        document.querySelector('#volume').value = vol;
    }
</script>
    </li>
    <li>
    <label for ="jumlah"> Jumlah :</label>
  <input type="range" min="0" max="100" name="vol1" id="vol1" oninput="nilai1(value)">
<output for="vol1" id="volume1">0</output>

<script>
    function nilai1(vol1) {
        document.querySelector('#volume1').value = vol1;
    }
</script>
    </li>
    <li>
    <label for ="total">= Total :</label>
    <input type="text" name="" id="total">
    </li>
    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type ="text/javascript">
        $(".perhitungan").keyup(function(){
            var vol = parseInt($("#vol").val())
            var vol1 = parseInt($("#vol1").val())

            var total = vol * vol1;
            $("#total").attr("value",total)

            });
    </script>
</body>
</html>