JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table1">
    <tr>
        <td class="c1">
            <p>slider:</p>
        </td>
        <td class="c2">
            <div id="slider"></div>
        </td>
    </tr>
    <tr>
        <td>
            <p>Val</p>
        </td>
        <td>
            <p>Slider values</p>
        </td>
    </tr>

CSS

.c2 {
    width: 300px;
}
tr, td {
    border: 1px solid;
}

JavaScript

var counter = 0;
$(function () {
    $("#slider").slider({
        value: 1,
        min: 1,
        max: 546,
        step: 1,
        slide: function (event, ui) {
            if(!counter) counter=$(this).slider( "option", "value" );
            var step=$(this).slider( "option", "step" );
            if(Math.round(Math.abs(ui.value-counter))>step){
                if(ui.value > counter) for (var i=counter+1;i<=ui.value;i++) addrow(i);
                else if(ui.value < counter) for (var i=counter;i>ui.value;i--) removerow();
            }else{
                if (ui.value > counter) addrow(ui.value);
                else if (ui.value < counter) removerow();                
            }
            counter = ui.value;
        }
    });
});

function addrow(num) {
    var newRow = $("<tr><td>" + num + "</td><td>" + num + "</td></tr>");
    $("#table1").append(newRow);
}

function removerow() {
    $('#table1 tr:last').remove();
}