Почему мой большой палец слайдера Webkit не стилизуется сам по себе? ⇐ CSS

[Anonymous]

Я пытался заставить свои вертикальные ползунки в Chrome работать так же, как в Firefox (что было странно с самого начала), но теперь, когда они работают, я вообще не могу стилизовать их большие пальцы.
Я не уверен, что это проблема из-за того, что я не понимаю свойств веб-кита или из-за какого-то конфликта с унаследованными свойствами, но все, что я читал и пробовал в Интернете, не принесло мне большого успеха.
Что я пробовал:

• Вертикальный слайдер для Chrome и Moz
  < li>https://brennaobrien.com/blog/2014/05/s ... owser.html
• https://dev.to/ konnorrogers/creating-a-vertical-slider-using-input-typerange-1pen
• Я пытаюсь стилизовать ползунок ввода диапазона, но веб-кит не работает
• https://css-tricks.com/styling-cross-br ... nputs-css/
  стиль не применяется к большому пальцу, когда он расположен вертикально (поворот ползунка на 90 градусов — довольно ужасное решение для адаптивного макета, а создание полностью настраиваемого слайдера JS кажется действительно грязным и хакерским решением, особенно потому, что в Firefox он работает «из коробки») < /li>

Страница веб-документации на ::-webkit-slider-thumb тоже не слишком помогла.
Я у вас есть репозиторий здесь: https://github.com/GitVex/BardicInspira ... -on-chrome компоненты > утилиты > 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) => {
setLocalVolume(parseInt(e.currentTarget.value));
},
[setLocalVolume]
);

return (




{localVolume}



);
};

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;
} */


Подробнее здесь: https://stackoverflow.com/questions/783 ... ing-itself