JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id='result'></div>

<div id="slider"></div>
<div id='showChck'></div>

JavaScript

$(document).ready(function() {
    for (var i = 0; i < 31; i++) {
        $('#showChck').prepend(
            $('<input/>', {
                type: "checkbox",
                name: "checkbox-" + i,
                id: "checkbox-" + i,
                class: "custom",
                style: "display:none;",
                title: "Cambiar los canales que tendrá la linea: " + i
            }),
            $('<label/>', {
                for: 'checkbox-' + i,
                id: "label-" + i,
                style: "display:none;"
            }).text(i)
        );
	}

    $("#slider").slider({
        min: 1,
        max: 30,
        value: 1,

        slide: function(event, ui) {
            $("#result").html(ui.value);

            var startx = 1;
            var slider = $("#slider-" + ui.value);

            $("input:checkbox").hide();
            $('label').hide();
            if ($("input:checkbox").is(":checked")) {
                slider.hide();
            }

            $(new Array(ui.value)).each(function() {
                // Get elements ID
                var checkbox = $("#checkbox-" + startx);
                var label = $("#label-" + startx);
                var slider = $("#slider-" + startx);

                checkbox.show();
                label.show();
                if ($(checkbox).is(":checked")) {
                    slider.show();
                }

                startx++;
            });
        }
    });

    $("body").on("click", "#showChck input", function() {
			var x = this.id;
			var $id = x.replace(/\D/g, "");

			// Obtenemos el slider nuevo
			var slider = $("#slider-" + $id);

			// El slider no existe?
			if (!slider.length) {

				// Nota que <span> ira dentro del div, sino se complica
				var newSlider = $("<div/>", {
					id: "slider-" + $id,
					"class": "slider", title: "Estos son los canales que tendrá la linea: " + $id
				}).append($("<span/>", {
					id: "result-" + $id
				}).text("4"));

				// Si no existe...