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="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js"></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)) {
return;
}
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 {
setValue2(newValue);
}
};
const CustomSlider = () => {
const [value2, setValue2] = React.useState([20, 37]);
return (
<div>
<Box sx={ {width: 300} }>
<Slider
getAriaLabel={() => 'Minimum distance'}
value={value2}
onChange={handleChange2}
valueLabelDisplay="auto"
getAriaValueText={valuetext}
disableSwap
/>
</Box>
</div>
)
}
const ConnectedComponent = Retool.connectReactComponent(CustomSlider);
const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<ConnectedComponent />);
</script>
I might try resizing the custom component on the canvas to see if it reloads with the slider