Vertical Slider Component

Vertical Continuous Slider

I had this idea of a Vertical Slider for a while now and finally took the time to write my first Streamlit component. This was definitely a lot of fun.


pip install streamlit-vertical-slider


import streamlit as st
import  streamlit_vertical_slider  as svs

                    slider_color= 'green' #optional
                    track_color='lightgray' #optional
                    thumb_color = 'red' #optional

Quick demo



:arrow_right: GitHub Repo


Love this @CarlosSerrano ! Also just beautiful design!


Thank you!

1 Like

Awesome @CarlosSerrano! And I second @Amanda_Kelly on the design. Functional value and a good user experience!


Great job! :balloon:

Feel free to add it to the Components Tracker: Streamlit Components - Community Tracker so we don’t lose track of it!

Have a nice day!

1 Like

Nice, Love the UI.
Although I am getting an error when trying to use it:

StreamlitAPIException: No such component directory: ‘C:\Users\alons\anaconda3\envs\alon39\lib\site-packages\streamlit_vertical_slider\frontend\build’


File "C:\Users\alons\Documents\AlonDB\MyHubViz\pages\", line 4, in <module>
    import streamlit_vertical_slider as svsFile "C:\Users\alons\anaconda3\envs\alon39\lib\site-packages\streamlit_vertical_slider\", line 15, in <module>
    _component_func = components.declare_component("streamlit_vertical_slider", path=build_dir)

Thanks @alonsh , Looking at it. Did you installed it via PIP? via clone?

via pip

Found the issue. Updating pip briefly @alonsh

@alonsh could you please try again. Version 1.0.2 has been added to PyPi, please upgrade.

Yes, Works perfectly now!
Is it possible to add a title to the sliders?

1 Like

Hey @CarlosSerrano

thank you a lot for your awesome and fun component!
The application I’d like to use this for deals with rather large numbers so that it cuts off the max value shown as well as the selected value in the bubble. I’m interested in adding a formatting option for large numbers.

I’m quite new to streamlit and have not created a component on my own yet. Could you maybe hint me towards a starting point for this?

Thank you!

Hi, If you want to take a stab at it you may fork the repo, and then submit a Pull Request to the original repository so we can update the package with your contributions.

Hi all. A new version of this component was release today.

Thank you for making this great component! The upgrade fixed a glitch I was having when first starting the app locally. The gradient Slider Color is also a very nice touch.

1 Like

Nice component. I’m having a problem with the slider not retaining the value that it set after a page reload. Do you have any suggestions?

Hi @Mike_Rightmire . Do you mean after a run or a full reload?

Hi. Thanks for the fast response.

I dont mean a full page reload. I.e.

I drag the slider to set a variable, which causes the page to update, after which the slider is again set to the default_value.

@Mike_Rightmire I saw your GitHub issue. Please make sure you are not using a calculated field for the key attribute as this will reset its value.

Thank you for that. I’m not. It’s just a string.

            key             = "selected_upper_limit_key",