streamlit
streamlit copied to clipboard
streamlit
Toggle/Switch: Slider with two values
Ported from https://discuss.streamlit.io/t/toggle-switch-slider-with-two-values/13086?u=stefanbrand
Using CSS and deleting/reordering some HTML in my browser's developer tools, I hacked this from a select_slider:
python st.select_slider("Displayed values:", ["Normalized", "Absolute"])
Would be cool to have something built-in that looks similar to this (regarding the display of labels, not the design):
What do you think?
Edit: I found this related topic, but it also does not have the labels to the left/right of the toggle: https://discuss.streamlit.io/t/toggle-switch-wip/3967/4?u=stefanbrand
Community voting on feature requests enables the Streamlit team to understand which features are most important to our users.
If you'd like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.
Thank you for sharing your slider ideas! Our mission is to make Streamlit the best way to build data apps, and your thoughts help us focus our roadmap where people feel the most pain. We're going to get this in front of our product team to see how we can best integrate this with our future plans.
We can't integrate every feature into the mainline codebase, but alternatively there are lots of interesting ways to extend Streamlit for your use cases via our Custom Components framework. You can read the docs about components here. If you can't use Custom Components, don't forget, Streamlit is really just Python, so the possibilities are endless! 🙂
We'll get back to you if we are able to prioritize this work!
Any progress? voting this up because it is something a UI needs quite often and it is much prettier than a selectbox
@StefanBrand and @breinbaas: We are looking into implementing a toggle soon but I'm not really decided whether we should have a toggle as here or a toggle button (i.e. just a button with two values), or possibly both. Can you share what exactly you want the toggle for? Also happy about sketches / screenshots!
A check box always implies on/off or activated/deactivated. My use case is detailed in the first post: normalized/absolute, something which is not conveyed by a check box with only one label.
but I'm not really decided whether we should have a toggle as here or a toggle button (i.e. just a button with two values)
I know that's an important question, so have you decided on that @jrieke.
btw there are many good UI libraries which implement both. it's solved and there are valid use cases.
Would be a great one to have, both toggles switch and custom binary buttons
One use-case for which I wanted this switch button is to have two modes on the page namely Dev Mode and Demo Mode. Usually I would like the app to dump some extra info in the Dev Mode and Hide them in the Demo Mode
Presently I do have such requirement and I am searching how to implement this functionality in the Streamlit APP.
I would also like to change the theme of the app programmatically, using an api to set theme, so that both the modes have different themes. I do not know how to achieve this currently :(
There are a few components for this functionality now: Streamlit Toggle Switch and Toggle switch (WIP)
No, let's leave this issue open.
We added st.toggle in the latest release, which allows to add an on/off toggle (similar to a checkbox). But this issue specifically calls for having a toggle that lets you toggle between two different values. We might do this in the future.
Not a direct solution but a decent alternative that I currently use is the radio button with Horizontal = True
st.radio(
"Choose Option",
["Toggle On", "Toggle Off"],
horizontal = True
)
I realized today if we add segmented controls/buttons, this would also be a pretty good solution for toggles with two values. E.g. something like this:
