creating elements/innerblocks via rangecontrol

The code from core/columns and core/column blocks are a good example of how to achieve this behaviour. Basically we register 2 block types: Carousel and Slide.

• Slide block type does not appear in the inserter.
• Carousel block type is the root block which appears in the inserter. Instead of keeping the count of slides in an attribute we listen to getBlocks selector. We use the replaceInnerBlocks action to update the number of slides.

If you need further explanation please let me know.

const { times } = lodash;
const { __ } = wp.i18n;
const { registerBlockType, createBlock } = wp.blocks;
const { PanelBody, RangeControl } = wp.components;
const { InnerBlocks, InspectorControls } = wp.blockEditor;
const { useDispatch, useSelect } = wp.data;
const { Fragment } = wp.element;

registerBlockType("my-plugin/slide", {
    title: __("Slide"),
    icon: "carrot",
    category: "common",
    attributes: {},
    supports: { inserter: false },
    edit(props) {
        const { className } = props;

        return (
            <div className={className}>
                <InnerBlocks
                    allowedBlocks={["core/quote", "core/gallery"]}
                    templateLock={false}
                />
            </div>
        );
    },
    save(props) {
        return (
            <div>
                <InnerBlocks.Content />
            </div>
        );
    }
});

registerBlockType("my-plugin/carousel", {
    title: __("Carousel"),
    icon: "layout",
    category: "common",
    attributes: {},
    edit(props) {
        const { className, clientId } = props;
        const { replaceInnerBlocks } = useDispatch("core/block-editor");
        const { slides } = useSelect(select => ({
            slides: select("core/block-editor").getBlocks(clientId)
        }));

        return (
            <div className={className}>
                <InspectorControls>
                    <PanelBody>
                        <RangeControl
                            label={__("Slides")}
                            value={slides.length}
                            min={2}
                            max={6}
                            onChange={count => {
                                let inner_blocks = slides;

                                if (slides.length < count) {
                                    inner_blocks = [
                                        ...inner_blocks,
                                        ...times(count - slides.length, () =>
                                            createBlock("my-plugin/slide")
                                        )
                                    ];
                                } else if (slides.length > count) {
                                    inner_blocks = inner_blocks.slice(0, count);
                                }

                                replaceInnerBlocks(clientId, inner_blocks, false);
                            }}
                        />
                    </PanelBody>
                </InspectorControls>
                <InnerBlocks
                    template={[["my-plugin/slide"], ["my-plugin/slide"]]}
                    allowedBlocks={["my-plugin/slide"]}
                    templateLock="all"
                />
            </div>
        );
    },
    save(props) {
        return (
            <div>
                <InnerBlocks.Content />
            </div>
        );
    }
});