Hi everyone,
I'm building a custom component, the goal is to build a 4-handles slider.
I've managed to create a custom component library, connect it to retool, drag the component on the app, etc.
The component more or less works so I'm happy with that.
The goal is basically for the user to say if he/she drives more in the city, the highway, the mountain, etc. See screenshot:
My component then returns two arrays:
- One with the position of the handles, that array is called values
- Another with the proportion of the trip that is done in the city, the mountain, etc. that array is called routeProportions
As you can see on the screenshot, within the component those arrays are populated dynamically and it works.
However if I want to display those datapoints elsewere in Reool, in a textbox for instance, it doesn't work.
I type in: {{ mSlider1.sliderValues[0]}}
but it says: TypeError: mSlider1.sliderValues is null
See screenshot:
Here's the code of my index.trx file (skipping the css stuff):
export const mSlider = ({ setOutputs }) => {
const initialValues = [25, 50, 75];
const [values, setValues] = useState(initialValues);
const [routeProportions, setRouteProportions] = useState([25, 25, 25, 25]);
const [labelText] = useState('RĂ©partition du trajet (%)');
useEffect(() => {
// Mettre Ă jour les valeurs dans l'environnement Retool
if (setOutputs) {
setOutputs({ sliderValues: values });
}
}, [values, setOutputs]);
const calculateProportions = (values) => {
const pct_city = values[0];
const pct_nat = values[1] - values[0];
const pct_highway = values[2] - values[1];
const pct_mountain = 100 - values[2];
return [pct_city, pct_nat, pct_highway, pct_mountain];
};
const calculateMiddlePoints = (values) => {
const points = [];
points.push(values[0] / 2); // Milieu du premier segment
for (let i = 1; i < values.length; i++) {
points.push((values[i - 1] + values[i]) / 2); // Milieu des segments internes
}
points.push((values[values.length - 1] + MAX) / 2); // Milieu du dernier segment
return points;
};
useEffect(() => {
const newProportions = calculateProportions(values);
setRouteProportions(newProportions);
}, [values]);
const middlePoints = calculateMiddlePoints(values);
return (
<SliderWrapper>
<SliderLabel htmlFor="custom-slider">{labelText}</SliderLabel>
<StyledSlider
min={MIN}
max={MAX}
value={values}
onChange={(newValues) => setValues(newValues)}
pearling
allowOverlap
renderTrack={(props, state) => (
<div key={`track-${state.index}`} {...props} className={`track track-${state.index}`}>
{routeProportions[state.index] > 0 && (
<TrackLabel style={{ center: `${middlePoints[state.index]}%` }}>
{TRACK_LABELS[state.index]} : {routeProportions[state.index]}%
</TrackLabel>
)}
</div>
)}
renderThumb={(props, state) => (
<div key={`thumb-${state.index}`} {...props} className="thumb" />
)}
/>
<SliderOutput>
Ville : {routeProportions[0]}% - Nationale : {routeProportions[1]}% - Autoroute : {routeProportions[2]}% - Montagne : {routeProportions[3]}%
</SliderOutput>
</SliderWrapper>
);
};
Any insight on how I could solve this?
Many thanks,
) since I posted it during the weekend, I thought it might have been lost in the flow.
You weren't seeing similar lag with the previous implementation?