Streamlit Vertical Slider

2.5.5 · active · verified Thu Apr 16

Streamlit-vertical-slider is a custom Streamlit component that creates a customizable vertical slider with various styling options including color, thumb shape, and height. It extends Streamlit's native widget capabilities to provide a vertical input method. The current version is 2.5.5, released on December 21, 2023. The project appears to have an active, though not rapid, release cadence, with significant updates in versions 2.0 and 2.5.

Common errors

```
ModuleNotFoundError: No module named 'streamlit_vertical_slider'
```
cause The `streamlit-vertical-slider` package is not installed or installed in a different environment.

fix Install the package using pip: `pip install streamlit-vertical-slider`
```
streamlit.errors.StreamlitAPIException: 'vertical_slider' is not a Streamlit command
```
cause The `vertical_slider` function was not correctly imported from the library.

fix Ensure you have `from streamlit_vertical_slider import vertical_slider` at the top of your Streamlit script.
```
TypeError: vertical_slider() got an unexpected keyword argument 'old_param_name'
```
cause You are using an older API parameter that was either removed or renamed in a newer version of `streamlit-vertical-slider` (e.g., in v2.0 update).

fix Refer to the latest documentation or quickstart for the correct parameter names and usage. Upgrade the library to the latest version to match the quickstart example if necessary: `pip install --upgrade streamlit-vertical-slider`.
```
The slider value does not reset or reflect the 'default_value' when the app reruns or initializes.
```
cause This was a known issue in versions prior to 2.5.0 where the default value was not always correctly sent back to Streamlit's state. Also, if a `key` is not provided, Streamlit might not manage the widget state as expected across reruns.

fix Upgrade to version 2.5.0 or later (`pip install --upgrade streamlit-vertical-slider`). Always provide a unique `key` argument to your `vertical_slider` component for proper state management across reruns.

Warnings

breaking Older versions (1.0, 1.0.1, 1.0.2, 2.0.5) were yanked from PyPI due to upgrade issues or being faulty. Users should ensure they are on version 2.5.x or newer for stability and latest features.
Fix: Upgrade to the latest stable version: `pip install --upgrade streamlit-vertical-slider`
breaking Version 2.0 introduced significant changes, including an upgrade to Material-UI v5, support for Dark Mode, and new optional arguments like `label`, `thumb_shape`, and `height`. Code written for pre-2.0 versions might need adjustments to these new parameters.
Fix: Review your `vertical_slider` arguments and update them to align with the V2.0+ API, especially for `height`, `thumb_shape`, and label handling.
gotcha In versions prior to 2.5, there was an issue where the `default_value` was not consistently sent back to Streamlit, potentially causing unexpected behavior upon initial render or resets.
Fix: Upgrade to version 2.5.0 or later to ensure `default_value` is handled correctly. `pip install --upgrade streamlit-vertical-slider`
gotcha The `label` argument was refactored into a tooltip in version 2.5, which reduced the width of the widget by 30%. While generally an improvement, this might slightly alter layout for apps relying on the previous label rendering.
Fix: Be aware of potential minor layout changes if upgrading from pre-2.5.0. Ensure your Streamlit app layout accommodates the potentially narrower slider if you relied on the previous label's width.

Install

pip install streamlit-vertical-slider Install latest version
pip install --upgrade streamlit-vertical-slider Upgrade to latest version

Imports

vertical_slider

from streamlit_vertical_slider import vertical_slider

Quickstart

This quickstart demonstrates how to import and use the `vertical_slider` component with various customization options. It sets up a basic Streamlit app, displays a vertical slider, and shows its current value.

import streamlit as st
from streamlit_vertical_slider import vertical_slider

st.set_page_config(layout="centered")
st.title("Vertical Slider Demo")

value = vertical_slider(
    label="Adjust Value",
    key="my_vertical_slider",
    height=300, # Optional - Defaults to 300
    thumb_shape="circle", # Optional - Defaults to "circle" (can be "square", "pill")
    step=1,
    default_value=50,
    min_value=0,
    max_value=100,
    track_color="#D3D3D3", # Optional - Defaults to Streamlit Red (a light gray often used)
    slider_color=('red','blue'), # Optional - Can be a single color or tuple for gradient
    thumb_color="orange", # Optional - Defaults to Streamlit Red
    value_always_visible=True # Optional - Defaults to False
)

st.write(f"Current Slider Value: {value}")

# Example of how to access the value if not directly assigned
if 'my_vertical_slider' in st.session_state:
    st.write(f"Value from session state: {st.session_state['my_vertical_slider']}")

view raw JSON →