input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: #e5e7eb;
    width: 8px;
    border-radius: 4px;
    outline: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
input[type="range"][orient="vertical"].progress-bar {
    writing-mode: bt-lr; /* 垂直方向 */
    -webkit-appearance: slider-vertical;
    transform: scaleY(-1); /* 翻转方向：min=1 在顶部，max 在底部 */
    position: fixed;
    top: 45%; /* 从视口中部开始 */
    right: 16px;
    height: calc(50vh - 16px); /* 高度为视口一半减去底部间隔 */
    bottom: 16px; /* 固定底部间隔 */
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
    transform: scaleY(-1); /* 修正滑块方向 */
}
input[type="range"]::-webkit-slider-thumb:hover {
    background: #2563eb;
}
input[type="range"]:hover {
    opacity: 1;
}