When I first found Streamlit I was thrilled at how quickly I could build apps in Python. One of the first things I did was to see how fast it would take to convert a Jupyter notebook to Streamlit, so I rebuilt the Timbre Transfer demo. While I loved how simple and quick it was to do this - one issue I kept running into with my Streamlit apps was how they would rerun every time I interacted with the slider.
In this manual regression demo, Streamlit reruns the script every time the slider's value is changed. If the computation becomes overly complex, then the animation tends to lag behind the slider interaction.
Imagine if you wanted to use a slider to parametrize a Machine Learning model, but the model would be trained every time you moved the slider... it would be quite time-consuming! Unfortunately, the Streamlit Slider is deeply ingrained into the Streamlit codebase, so making such a change is easier said than done.
Streamlit version 0.63, however, introduced Streamlit components that now enable us to integrate arbitrary HTML/CSS/JS code into our apps. The extensions can then be published so that other users can benefit from this custom functionality.
Our slider problem is the PERFECT use case for this new extension point!
This in-depth tutorial will teach you all the techniques to build your first Streamlit component, by rendering a slider that reruns Streamlit on mouse release rather than value change.
As a teaser, the following Chart.js interactive Streamlit app is built with less than 50 lines of Python+React code and uses all the building blocks from this tutorial.
Interested ? Head to my Streamlit Component tutorial! By the end of the tutorial, you will be able to plug in new widgets into Streamlit and reuse this workflow to wrap any custom web feature into your app.
Top comments (0)