Vertical Slider Component

Custom Components
1

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.

Installation

pip install streamlit-vertical-slider

Usage

import streamlit as st
import  streamlit_vertical_slider  as svs

svs.vertical_slider(key=key, 
                    default_value=i[1], 
                    step=1, 
                    min_value=0, 
                    max_value=100,
                    slider_color= 'green' #optional
                    track_color='lightgray' #optional
                    thumb_color = 'red' #optional
                    )

Quick demo

filtering

Repo

:arrow_right: GitHub Repo

15 Likes
2

Love this @CarlosSerrano ! Also just beautiful design!

4 Likes
3

Thank you!

2 Likes
4

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

3 Likes
5

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!
Fanilo

2 Likes
6

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’

Traceback:

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

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

1 Like
8

via pip

9

Found the issue. Updating pip briefly @alonsh

1 Like
10

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

1 Like
11

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

1 Like
12

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!

13

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.

14

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

1 Like
15

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
16

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?

17

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

18

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.

19

@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.

20

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

            key             = "selected_upper_limit_key",