如何调整Streamlit双滑块的起止点文本位置？

Streamlit原生双滑块的标签默认并排显示，要实现起始标签在上、终点标签在下，且近距离时避免重叠，需通过自定义CSS修改组件样式，具体方案如下：

完整代码示例 #

import streamlit as st
import datetime

# 示例日期变量（按需替换为你的实际数据）
start_dt = datetime.date(2023, 1, 1)
index_dt = datetime.date(2023, 6, 1)
end_dt = datetime.date(2023, 12, 31)
format = "YYYY-MM-DD"

# 注入自定义CSS调整滑块标签位置
st.markdown("""
<style>
/* 定位双滑块的两个值标签 */
.stSlider div[data-baseweb="slider"] span:nth-of-type(1) {
    position: absolute;
    top: -30px; /* 将起始标签移至滑块上方 */
}
.stSlider div[data-baseweb="slider"] span:nth-of-type(2) {
    position: absolute;
    top: 20px; /* 将终点标签移至滑块下方 */
}
/* 当两个滑块距离过近时，调整终点标签位置避免重叠 */
.stSlider div[data-baseweb="slider"] span:nth-of-type(1):hover + span:nth-of-type(2),
.stSlider div[data-baseweb="slider"] span:nth-of-type(1):active + span:nth-of-type(2) {
    top: -10px; /* 终点标签略高于起始标签 */
    left: 15px; /* 向右偏移进一步避免重叠 */
}
</style>
""", unsafe_allow_html=True)

# 原滑块代码（保持你的列布局不变）
slider = cols1.slider('Select date', min_value=start_dt, value=[start_dt, index_dt], max_value=end_dt, format=format)

代码说明 #

1. CSS核心逻辑：

   • 用nth-of-type(1)选中起始滑块标签，通过绝对定位将其移至滑块上方
   • 用nth-of-type(2)选中终点滑块标签，同样通过绝对定位移至滑块下方
   • 当两个滑块距离过近（或用户交互时），通过相邻兄弟选择器调整终点标签的位置，使其略高于起始标签并偏移，避免文本重叠

2. 注意事项：

   • Streamlit的组件CSS类可能随版本更新变化，若后续样式失效，可通过浏览器开发者工具重新定位标签的CSS选择器
   • 可根据自身布局需求调整top、left的数值，优化标签位置

内容的提问来源于stack exchange，提问作者user14269252