# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022)
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#     http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.

import numpy as np
import pandas as pd

import streamlit as st
from streamlit import runtime

w1 = st.select_slider(
    "Label 1",
    value=("orange", "blue"),
    options=["red", "orange", "yellow", "green", "blue", "indigo", "violet"],
)
st.write("Value 1:", w1)

w2 = st.select_slider(
    "Label 2",
    options=np.array([1, 2, 3, 4, 5]),
)
st.write("Value 2:", w2)

w3 = st.select_slider(
    "Label 3",
    value=[2, 5],
    options=pd.Series([1, 2, 3, 4, 5, 6, 7, 8, 9]),
)
st.write("Value 3:", w3)

w4 = st.select_slider(
    "Label 4",
    value=5,
    options=pd.DataFrame(
        {
            "first column": [1, 2, 3, 4, 5],
            "second column": [10, 20, 30, 40, 50],
        }
    ),
)
st.write("Value 4:", w4)

w5 = st.select_slider(
    "Label 5",
    value=("orange", "blue"),
    options=["red", "orange", "yellow", "green", "blue", "indigo", "violet"],
    disabled=True,
)
st.write("Value 5:", w5)

w6 = st.select_slider(
    "Label 6",
    options=["red", "orange", "yellow", "green", "blue", "indigo", "violet"],
    label_visibility="hidden",
)

st.write("Value 6:", w6)


w7 = st.select_slider(
    "Label 7",
    options=["red", "orange", "yellow", "green", "blue", "indigo", "violet"],
    label_visibility="collapsed",
)

st.write("Value 7:", w7)

if runtime.exists():

    def on_change():
        st.session_state.select_slider_changed = True

    st.select_slider(
        "Label 8",
        options=np.array([1, 2, 3, 4, 5]),
        key="select_slider8",
        on_change=on_change,
    )
    st.write("Value 8:", st.session_state.select_slider8)
    st.write("Select slider changed:", "select_slider_changed" in st.session_state)

e2e/scripts/st_select_slider.py
# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022)
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#     http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.

import numpy as np
import pandas as pd

import streamlit as st
from streamlit import runtime

w1 = st.select_slider(
    "Label 1",
    value=("orange", "blue"),
    options=["red", "orange", "yellow", "green", "blue", "indigo", "violet"],
)
st.write("Value 1:", w1)

w2 = st.select_slider(
    "Label 2",
    options=np.array([1, 2, 3, 4, 5]),
)
st.write("Value 2:", w2)

w3 = st.select_slider(
    "Label 3",
    value=[2, 5],
    options=pd.Series([1, 2, 3, 4, 5, 6, 7, 8, 9]),
)
st.write("Value 3:", w3)

w4 = st.select_slider(
    "Label 4",
    value=5,
    options=pd.DataFrame(
        {
            "first column": [1, 2, 3, 4, 5],
            "second column": [10, 20, 30, 40, 50],
        }
    ),
)
st.write("Value 4:", w4)

w5 = st.select_slider(
    "Label 5",
    value=("orange", "blue"),
    options=["red", "orange", "yellow", "green", "blue", "indigo", "violet"],
    disabled=True,
)
st.write("Value 5:", w5)

w6 = st.select_slider(
    "Label 6",
    options=["red", "orange", "yellow", "green", "blue", "indigo", "violet"],
    label_visibility="hidden",
)

st.write("Value 6:", w6)


w7 = st.select_slider(
    "Label 7",
    options=["red", "orange", "yellow", "green", "blue", "indigo", "violet"],
    label_visibility="collapsed",
)

st.write("Value 7:", w7)

if runtime.exists():

    def on_change():
        st.session_state.select_slider_changed = True

    st.select_slider(
        "Label 8",
        options=np.array([1, 2, 3, 4, 5]),
        key="select_slider8",
        on_change=on_change,
    )
    st.write("Value 8:", st.session_state.select_slider8)
    st.write("Select slider changed:", "select_slider_changed" in st.session_state)

with st.expander("Expander", expanded=True):
    w9 = st.select_slider(
        label="Label 9",
        options=["foo", "bar", "baz", "This is a very, very long option"],
        value="This is a very, very long option",
    )

    st.write("Value 9:", w9)

e2e/scripts/st_select_slider.py
diff --git a/e2e/scripts/st_select_slider.py b/e2e/scripts/st_select_slider.py
index 403fe937f67a..b4c0d0f8ed4d 100644
--- a/e2e/scripts/st_select_slider.py
+++ b/e2e/scripts/st_select_slider.py
@@ -88,3 +88,12 @@ def on_change():
     )
     st.write("Value 8:", st.session_state.select_slider8)
     st.write("Select slider changed:", "select_slider_changed" in st.session_state)
+
+with st.expander("Expander", expanded=True):
+    w9 = st.select_slider(
+        label="Label 9",
+        options=["foo", "bar", "baz", "This is a very, very long option"],
+        value="This is a very, very long option",
+    )
+
+    st.write("Value 9:", w9)
diff --git a/e2e/specs/st_select_slider.spec.js b/e2e/specs/st_select_slider.spec.js
index 581a53ed45a9..3c6bc01515ae 100644
--- a/e2e/specs/st_select_slider.spec.js
+++ b/e2e/specs/st_select_slider.spec.js
@@ -21,7 +21,7 @@ describe("st.select_slider", () => {
   });
 
   it("displays correct number of elements", () => {
-    cy.get(".element-container .stSlider").should("have.length", 8);
+    cy.get(".element-container .stSlider").should("have.length", 9);
   });
 
   it("looks right when disabled", () => {
@@ -166,4 +166,16 @@ describe("st.select_slider", () => {
       "Value 8: 2" + "Select slider changed: True"
     );
   });
+
+  it("realigns label values when expander re-opened", () => {
+    // Closes the expander
+    cy.get(".streamlit-expanderHeader").click();
+
+    // Reopens the expander
+    cy.get(".streamlit-expanderHeader").click();
+
+    // Positioning error occurs on overflow of expander container
+    // which occurs when position left set to 0px
+    cy.getIndexed(".StyledThumbValue", 11).should("not.have.css", "left", "0px")
+  });
 });
diff --git a/e2e/specs/st_slider.spec.js b/e2e/specs/st_slider.spec.js
index 5ef4116d778a..352f0dcd8471 100644
--- a/e2e/specs/st_slider.spec.js
+++ b/e2e/specs/st_slider.spec.js
@@ -43,16 +43,16 @@ describe("st.slider", () => {
     cy.get(".stSlider label").should(
       "have.text",
       "Label A" +
-        "Range A" +
-        "Label B" +
-        "Range B" +
-        "Label 1" +
-        "Label 2" +
-        "Label 3 - This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long label" +
-        "Label 4" +
-        "Label 5" +
-        "Label 6" +
-        "Label 7"
+      "Range A" +
+      "Label B" +
+      "Range B" +
+      "Label 1" +
+      "Label 2" +
+      "Label 3 - This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long label" +
+      "Label 4" +
+      "Label 5" +
+      "Label 6" +
+      "Label 7"
     );
   });
 
@@ -82,21 +82,33 @@ describe("st.slider", () => {
     );
   });
 
+  it("realigns label values when expander re-opened", () => {
+    // Closes the expander
+    cy.get(".streamlit-expanderHeader").click();
+
+    // Reopens the expander
+    cy.get(".streamlit-expanderHeader").click();
+
+    // Positioning error occurs on overflow of expander container
+    // which occurs when position left set to 0px
+    cy.getIndexed(".StyledThumbValue", 5).should("not.have.css", "left", "0px")
+  });
+
   it("has correct values", () => {
     cy.get(".stMarkdown").should(
       "have.text",
       "Value A: 12345678" +
-        "Range Value A: (10000, 25000)" +
-        "Value B: 10000" +
-        "Range Value B: (10000, 25000)" +
-        "Value 1: 25" +
-        "Value 2: (25.0, 75.0)" +
-        "Value 3: 1" +
-        "Value 4: 10000" +
-        "Value 5: 25" +
-        "Value 6: 36" +
-        "Value 7: 25" +
-        "Slider changed: False"
+      "Range Value A: (10000, 25000)" +
+      "Value B: 10000" +
+      "Range Value B: (10000, 25000)" +
+      "Value 1: 25" +
+      "Value 2: (25.0, 75.0)" +
+      "Value 3: 1" +
+      "Value 4: 10000" +
+      "Value 5: 25" +
+      "Value 6: 36" +
+      "Value 7: 25" +
+      "Slider changed: False"
     );
   });
 
diff --git a/frontend/src/lib/components/widgets/Slider/Slider.tsx b/frontend/src/lib/components/widgets/Slider/Slider.tsx
index dbbdc4114be4..98490f9fd892 100644
--- a/frontend/src/lib/components/widgets/Slider/Slider.tsx
+++ b/frontend/src/lib/components/widgets/Slider/Slider.tsx
@@ -92,10 +92,13 @@ class Slider extends React.PureComponent<Props, State> {
       i < Math.min(this.thumbRef.length, this.thumbValueRef.length);
       i++
     ) {
-      this.thumbValueAlignment(
-        this.thumbRef[i].current,
-        this.thumbValueRef[i].current
-      )
+      // Delay the alignment to allow the page layout to complete
+      setTimeout(() => {
+        this.thumbValueAlignment(
+          this.thumbRef[i].current,
+          this.thumbValueRef[i].current
+        )
+      }, 0)
     }
 
     if (this.props.element.setValue) {

Right-side label of `st.slider` and `st.select_slider` overflows when inside `st.expander`
### Checklist

- [x] I have searched the [existing issues](https://github.com/streamlit/streamlit/issues) for similar issues.
- [X] I added a very descriptive title to this issue.
- [X] I have provided sufficient information below to help reproduce this issue.

### Summary

Right-side label of `st.slider` and `st.select_slider` overflows when inside `st.expander`.

In the past I submitted a similar issue for the left-side label (see https://github.com/streamlit/streamlit/issues/5898); now it is the right-side label that is misbehaving.

### Reproducible Code Example

[![Open in Streamlit Cloud](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://issues.streamlitapp.com/?issue=gh-6297)

```Python
import streamlit as st

st.title("Right-side label of slider and select_slider overflows when inside expander")

with st.expander('Example st.expander'):

    single_value = st.slider(
        label='Example st.slider',
        min_value=9_500_000,
        max_value=10_000_000,
        value=10_000_000
    )

    first_value,last_value = st.slider(
        label='Example st.slider (range mode)',
        min_value=9_500_000,
        max_value=10_000_000,
        value=(9_500_000,10_000_000)
    )

    single_value = st.select_slider(
        label='Example st.select_slider',
        options=['Maradona','Ronaldo','Pele','This is a very, very long label'],
        value='This is a very, very long label'
        )

    first_value,last_value = st.select_slider(
        label='Example st.select_slider (range mode)',
        options=['Maradona','Ronaldo','Pele','This is a very, very long label'],
        value=['Maradona','This is a very, very long label']
        )
```


### Steps To Reproduce

1. Run the reproducible code example
2. Open the expander and see that all the right side labels are overflowing

### Expected Behavior

Labels should not overflow beyond the widgets width.

### Current Behavior

_No response_

### Is this a regression?

- [X] Yes, this used to work in a previous version.

### Debug info

- Streamlit version: 1.20.0
- Python version: 3.11
- Operating System: macOS
- Browser: Brave
- Virtual environment: conda

### Additional Information

_No response_

### Are you willing to submit a PR?

- [ ] Yes, I am willing to submit a PR!
