Trying to create a new custom component by using Material-UI, but nothing comes up

I am trying to create a new custom component, which is range slider but with date.
(I don't see it in components that Retool originally provides, but decided to make one.)

I'd like to make it where I could adjust date interval and slide it by holding a click onto the bar.
So I decided to make it by using Material-UI.

The following is my code in iFrame code and there is no error message in Chrome console.
Please note that there is nothing coming up in customComponent4.

Can anyone help with this issue? Also, I am wondering if date interval range slider is in the upcoming feature plans or there is any similar topic in the community!

the code in the iFrame:

<script src="" crossorigin></script>
<script src="" crossorigin></script>
<script src=""></script>

<div id="root"></div>

<script type="text/babel">
    const { Box, Slider } = MaterialUI;

    const minDistance = 10;
    function valuetext(value) {
        return `${value}°C`;

    const handleChange2 = (event, newValue, activeThumb) => {
        if (!Array.isArray(newValue)) {

        if (newValue[1] - newValue[0] < minDistance) {
        if (activeThumb === 0) {
            const clamped = Math.min(newValue[0], 100 - minDistance);
            setValue2([clamped, clamped + minDistance]);
        } else {
            const clamped = Math.max(newValue[1], minDistance);
            setValue2([clamped - minDistance, clamped]);
        } else {

    const CustomSlider = () => {
        const [value2, setValue2] = React.useState([20, 37]);
        return (
                <Box sx={ {width: 300} }>
                        getAriaLabel={() => 'Minimum distance'}

    const ConnectedComponent = Retool.connectReactComponent(CustomSlider);
    const container = document.getElementById("root");
    const root = ReactDOM.createRoot(container);
    root.render(<ConnectedComponent />);


Hi @chester,

It looks like this code is working on my side:

:thinking: I might try resizing the custom component on the canvas to see if it reloads with the slider

I don't believe a native component for this is on our roadmap, but I'll file a feature request!