JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
        <tr class="row head-row">
            <td colspan="2" class="cell1 resource-text white-gradient" style="padding-left: 13px;"><span>Recursos adicionais</span></td>
            <td class="resource-text base"><span>Base</span></td>
            <td class="resource-text white-gradient total" style="font-size: 13px;"><span>Total</span></td>
        </tr>
        <tr class="row">
            <td><span>CPU</span></td>
            <td class="slider"><div class="slider-cont" data-step="0.2" data-max="3"></div></td>
            <td class="base"><span class="base_width">1.2 Ghz</span></td>
            <td class="total"><span class="total_width"><span class="total-value">1.2</span> Ghz</span></td>
        </tr>
        <tr class="row">
            <td><span>RAM</span></td>
            <td class="slider"><div class="slider-cont" data-step="512" data-max="4096"></div></td>
            <td class="base"><span class="base_width">512 MB</span></td>
            <td class="total"><span class="total_width"><span class="total-value">512</span> MB</span></td>
        </tr>
        <tr class="row">
            <td><span>HDD</span></td>
            <td class="slider"><div class="slider-cont" data-step="20" data-max="3000"></div></td>
            <td class="base"><span class="base_width">20 GB</span></td>
            <td class="total"><span class="total_width"><span class="total-value">20</span> GB</span></td>
        </tr>
        <tr class="row">
            <td><span>LAN</span></td>
            <td class="slider"><div class="slider-cont" data-step="10" data-max="100"></div></td>
            <td class="base"><span class="base_width">10 Mb/sec</span></td>
            <td class="total"><span class="total_width"><span class="total-value">512</span> Mb/sec</span></td>
        </tr>
    </tbody>
</table>

CSS

td {
    padding: 10px 20px;
}
.slider-cont {
    width: 200px;
}

JavaScript

$(".slider-cont").each(function () {
    var este = $(this);
    var minimo = parseFloat(este.closest('tr').find('.base_width').text(), 10);
    var maximo = este.data('max');
    var degraus = este.data('step');
    var mostrador = este.closest('tr').find('td.total').find('.total-value');
    este.slider({
        range: "min",
        min: minimo,
        max: maximo,
        step: degraus,
        slide: function (event, ui) {
            mostrador.text(ui.value);
        }
    });
});