Fiddle Try your profit

by moku23

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <title>Price List Page</title>
    <style>
        .payout-result {
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h2>Price List Page</h2>
        <div class="row my-4">
            <div class="col-md-3">
                <header>Multiplier</header>
                <input type="range" class="price-range" id="multiplierRange" min="50" max="1500" value="1" step="50">
                <p id="multiplierValue">Multiplier: 1</p>
            </div>
            <div class="col-md-9">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Percentage</th>
                            <th>Expected Payout</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>20%</td>
                            <td class="payout-result" data-percentage="20">0</td>
                        </tr>
                        <tr>
                            <td>40%</td>
                            <td class="payout-result" data-percentage="40">0</td>
                        </tr>
                        <tr>
                            <td>60%</td>
                            <td class="payout-result" data-percentage="60">0</td>
                        </tr>
                        <tr>
                            <td>75%</td>
                            <td class="payout-result" data-percentage="75">0</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
        ...