Setting widget width

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
            )

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

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:

1 Like