Установить ширину сетки таблицы в процентах от значения ползунка диапазона

Question

Я хочу установить ширину столбца таблицы на основе значения ползунка диапазона, используя jQuery. В этом Link можно увидеть несколько ползунков диапазона. Если значение первого ползунка диапазона составляет 21%, то ширина первого столбца в таблице должна составлять 21%. Точно так же, если значение второго ползунка диапазона составляет 16%, тогда ширина второго столбца в таблице должна составлять 16%.

Во-вторых, если я перейду к первому ползунку диапазона, и значение первого ползунка диапазона будет увеличено,если значение первого ползунка увеличивается, то оно должно уменьшить значение второго ползунка. Значит, я хочу сохранить значение всего ползунка 100%;

Пожалуйста, проверьте ниже код

    thead tr {
        background: blue;
        border: none;
    }
    
    .main-div {
        width: 100%;
    }
    
    .rannge-slider-container {
        width: 30%;
        float: left;
    }
    
    .table-container {
        width: 70%;
        float: left;
    }

<div class="main-div">
    <div class="rannge-slider-container">
        <div class="range-slider">
            <input class="range-slider1" type="range" value="14" min="0" max="20">
            <span class="range-slider__value">19</span>
        </div>

        <div class="range-slider">
            <input class="range-slider1" type="range" value="14" min="0" max="20">
            <span class="range-slider__value">16</span>
        </div>
        <div class="range-slider">
            <input class="range-slider1" type="range" value="14" min="0" max="20">
            <span class="range-slider__value">6</span>
        </div>
        <div class="range-slider">
            <input class="range-slider1" type="range" value="14" min="0" max="20">
            <span class="range-slider__value">13</span>
        </div>
        <div class="range-slider">
            <input class="range-slider1" type="range" value="14" min="0" max="20">
            <span class="range-slider__value">13</span>
        </div>
        <div class="range-slider">
            <input class="range-slider1" type="range" value="14" min="0" max="20">
            <span class="range-slider__value">13</span>
        </div>
        <div class="range-slider">
            <input class="range-slider1" type="range" value="14" min="0" max="20">
            <span class="range-slider__value">20</span>
        </div>        
    </div>
    <!-- end slider html-->
    <div class="table-container">
        <table class="dgrid-row-table" role="presentation">
            <thead>
                <tr>
                    <th> Date</th>
                    <th>Activity</th>
                    <th>
                        Activity</th>
                    <th>
                        Qty
                    </th>
                    <th>
                        Rate
                    </th>
                    <th>
                        Amount
                    </th>
                    <th>
                        SKU
                    </th>
                </tr>

            </thead>
            <tbody>
                <tr>
                    <td>
                        12/01/2016
                    </td>
                    <td> Item name </td>
                    <td>
                        Description of the item </td>
                    <td>
                        2
                    </td>
                    <td>
                        225.00
                    </td>
                    <td>
                        450.00
                    </td>
                    <td>
                        PRD123
                    </td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <td>
                        12/01/2016
                    </td>
                    <td> Item name </td>
                    <td>
                        Description of the item </td>
                    <td>
                        2
                    </td>
                    <td>
                        225.00
                    </td>
                    <td>
                        450.00
                    </td>
                    <td>
                        PRD123
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Кто-нибудь, пожалуйста, помогите мне, как я могу это сделать.

Спасибо.