# Setting widget width

**URL:** <https://discuss.streamlit.io/t/setting-widget-width/37143>\
**Category:** Using Streamlit\
**Created:** [February 4, 2023, 11:07pm UTC](https://discuss.streamlit.io/t/setting-widget-width/37143 "2023-02-04T23:07:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ngallo1](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/ngallo1/32/6393_2.png) [@ngallo1](https://discuss.streamlit.io/u/ngallo1)\
**Post date:** [February 4, 2023, 11:07pm UTC](https://discuss.streamlit.io/t/setting-widget-width/37143/1 "2023-02-04T23:07:44Z")

</div>

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](https://docs.streamlit.io/library/api-reference/widgets/st.slider) call.

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

```

---

<div class="post-metadata">

**Author:** ![ferdy](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/ferdy/32/29957_2.png) [@ferdy](https://discuss.streamlit.io/u/ferdy)\
**Post date:** [February 5, 2023, 2:39am UTC](https://discuss.streamlit.io/t/setting-widget-width/37143/2 "2023-02-05T02:39:54Z")

</div>

Have a look at this [thread](https://discuss.streamlit.io/t/button-size-in-sidebar/36132), there might be a solution to your need.

---

<div class="post-metadata">

**Author:** ![edsaac](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/edsaac/32/47599_2.png) [@edsaac](https://discuss.streamlit.io/u/edsaac)\
**Post date:** [February 7, 2023, 3:14pm UTC](https://discuss.streamlit.io/t/setting-widget-width/37143/3 "2023-02-07T15:14:31Z")

</div>

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

```python
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](https://global.discourse-cdn.com/streamlit/original/3X/f/b/fbdbee8487da551ebe7a1d577dff54d5d6569871.png)

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/streamlit/original/3X/c/f/cf4c2ee0d938358f82448c5fe4b9c3c91d7ce19c.svg) [@system](https://discuss.streamlit.io/u/system)\
**Post date:** [February 7, 2024, 3:15pm UTC](https://discuss.streamlit.io/t/setting-widget-width/37143/4 "2024-02-07T15:15:11Z")

</div>

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