Recap

How do we define what is rendered on the browser ?

Here’s a summary of where we are right now.

Slider rendering recap Slider rendering recap

  • The function _component_func—returned by declare_component—pings the component webserver for its index.html with the CustomSlider component code.
  • Arguments passed to _component_func are transferred to props.args for CustomSlider. This is specific to the React template and encoded within withStreamlitConnection. If you’re using another JS framework or vanilla Javascript, you will need to retrieve the arguments from within the JS event.
  • We pass those props to the Slider component from baseui, which acts as a stateless view of our component. Anything in the return statement of CustomSlider is rendered on the web browser.
  • We initialize local state with an arbitrary value in our CustomSlider
  • Each time you interact with the rendered slider, the value of the slider is stored in the state.
  • The key argument prevents the slider from being remounted when props are changed or the script is rerun.

So we now have an interactive CustomSlider. The third part of the tutorial will dig into returning the state of the slider back into the Streamlit app.