Setting widget width

Using Streamlit
1

Is there an easy way to set the width of a widget on the main page component (not sidebar)? For example, I am using the below code for a slider to set its width to about 1/4 the screen width. It seems like there should be a cleaner solution like an option within the st.slider call.

        col1, _ = st.columns([1,3])
        with col1:
            value = st.slider(
                label="Slider",
                min_value=1, max_value=10
            )
2

Have a look at this thread, there might be a solution to your need.

3

The other option is adding some CSS to style the slider… which is arguably not a better option that leveraging the columns layout.

import streamlit as st

st.markdown("""
    <style>
    .stSlider [data-baseweb=slider]{
        width: 25%;
    }
    </style>
    """,unsafe_allow_html=True)

st.write("Some long repeated text "*10)
st.slider("Short slider", min_value=1, max_value=10)
st.write("More text "*15)

Result:

image
image920×577 21.9 KB

1 Like
4

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.