求助：Chrome垂直滑块的webkit slider thumb无法样式化

我一直尝试让Chrome的垂直滑块实现Firefox中的效果，起初连滑块正常工作都费了一番功夫，现在滑块可正常运行，但完全无法为其::-webkit-slider-thumb设置样式。不确定是对webkit属性理解有误，还是存在继承属性冲突，尝试了多篇技术文章及MDN文档的方案均未取得进展。

尝试过的方案 #

• Chrome和Firefox垂直滑块实现方案
• 为所有浏览器设置range输入样式
• 使用input type=range创建垂直滑块
• range输入的webkit滑块thumb样式不生效问题
• 跨浏览器兼容的range输入样式设置
• 垂直range输入的thumb样式不生效（旋转滑块的方案对响应式布局不友好，完全自定义JS滑块则过于繁琐，而Firefox中该功能可原生实现）

MDN上关于::-webkit-slider-thumb的文档也未能提供有效帮助。

相关代码 #

仓库路径：components > utils > VolumeSlider.tsx

VolumeSlider.tsx #

import React, { useMemo, useCallback } from 'react';
import { localVolumeControlEndType } from '../Player/states';
import { motion } from 'framer-motion';
import styles from './VolumeSlider.module.css';

interface VolumeSliderProps {
    volumeControl: localVolumeControlEndType;
    className?: string;
    textBgColor?: string;
    height?: number;
}

const VolumeSlider = ({ volumeControl, className = '', textBgColor = '', height = 100 }: VolumeSliderProps) => {
    const uniqueId = useMemo(() => `volumeSlider${Math.floor(Math.random() * 1000000)}`, []);
    const { localVolume, setLocalVolume } = volumeControl;

    const handleVolumeChange = useCallback(
        (e: React.ChangeEvent<HTMLInputElement>) => {
            setLocalVolume(parseInt(e.currentTarget.value));
        },
        [setLocalVolume]
    );

    return (
        <div className={`${styles.container} ${className}`}>
            <input
                id={uniqueId}
                className={styles.slider}
                type="range"
                min="0"
                max="100"
                step="1"
                //@ts-ignore
                orient="vertical"
                value={localVolume}
                onChange={handleVolumeChange}
                style={{ height: `${height}px` }} // Inline style for dynamic height
            />
            <div style={{ height }}>
                <motion.p
                    className={textBgColor}
                    animate={{
                        y: height * (1 - localVolume / 100) + 0.12 * localVolume - 20,
                        transition: { ease: 'easeOut', duration: .5 },
                    }}
                >
                    {localVolume}
                </motion.p>
            </div>
        </div>
    );
};

export default VolumeSlider;

VolumeSlider.module.css #

.container {
    display: flex;
    width: 10%;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.slider {
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical; /* The problem may be with this? Maybe switching this to none will let me style it but not setting it to slider-vertical will make it not work */
    width: 5px;
}

/* ------------------ Firefox ------------------ */

.slider::-moz-range-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background-color: red;
    border-radius: 50%;
    border: none;
    transition: 0.2s ease-in-out;
}

/* ------------------ Chrome ------------------ */

.slider::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background-color: rgb(37, 190, 39);
    border-radius: 2.5px;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: red;
    cursor: pointer;
    margin-top: 50px;
  }

/* ------------------ MS Edge ------------------ */

.slider::-ms-thumb {
    width: 16px;
    height: 16px;
    background-color: red;
    border-radius: 50%;
}

.slider::-ms-track {
    width: 100%;
    height: 5px;
    background: #ccc;
    border-color: transparent;
    color: transparent;
}
/* 
.slider:focus {
    outline: none;
} */

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