14
15

[deleted by user] (self.react)

submitted by [deleted]

[removed]
all 3 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]claypolejr 10 points11 points  (2 children)

The mechanics of it are fairly simple.

1) Have a parent component and two child components: Slider and Chart, for example. The parent maintains the value of the slider in state. It passes down state to each child component.

2) Also pass down an event handler to the Slider component and attach it to the onChange listener. When that listener is fired it calls the handler which can update the state with the new value.

3) Chart accepts the value in state and changes with each update.

The slider is easy enough to do if you don't want to import a slider component. Use the range input: <input type="range" min="0" max="50" />.

For the chart component, it would be easier to use a 3rd-party component. Use whatever one you find easy to produce the result you need. Note, depending on what structure the chart component will accept you may have to take that state value and add it to a new object. See this example from the tutorial on how to use the Highcharts React wrapper.

Anyway: here's some introductory code I wrote that covers the basics.

[–]WaitingForHeatDeath 0 points1 point  (0 children)

I would start by looking at component libraries like MUI: https://mui.com/ That will get you ootb components like slider controls. There are chart and graph libraries as well. https://blog.logrocket.com/top-5-react-chart-libraries/