Большой палец диапазона ввода не меняется в Chrome, несмотря на использование `-webkit-appearance: none` ⇐ CSS

[Гость]

Я пытаюсь изменить стили для ползунка диапазона ввода в Chrome, несмотря на использование -webkit-appearance: none.

Полный код в codepen смотрите здесь https://codepen.io/maz-sm-22/pen/GRXyzNv.

html

CSS

тело { высота: 100вх; цвет фона: #36024F; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; } ввод[тип="диапазон"] { -webkit-внешний вид: нет; ширина: 60%; высота: 16 пикселей; фон: rgba(255, 255, 255, 0,4); радиус границы: 50 пикселей; фоновое изображение: линейный градиент (rgb (203, 124, 243), rgb (203, 124, 243)); размер фона: 50% 100%; фоновый повтор: без повтора; курсор: указатель; } input[type=range]::-moz-range-thumb, input[type="range"]::-webkit-slider-thumb { -webkit-внешний вид: нет; высота: 60 ​​пикселей; ширина: 60 ​​пикселей; граница-радиус: 50%; цвет фона: #fefcff; курсор: указатель; box-shadow: 0px 0px 14px 5px rgba(255, 255, 255, 0.2); } input[type=range]::-moz-range-track, input[type=range]::-webkit-slider-runnable-track { -webkit-внешний вид: нет; коробка-тень: нет; граница: нет; фон: прозрачный; } JS

const handleInputChange = (e) => { константное значение = e.target.value; console.log(значение); e.target.style.backgroundSize = `${value}% 100%` } document.addEventListener('input', handleInputChange) В Firefox он работает должным образом.

Если кто-нибудь имеет представление о том, что происходит, я был бы очень признателен за вашу информацию.

Спасибо!