How to make transparent slider in input type="range"?

Question

css

Hello!
Tell me - how can I style the slider in the slider so that the background of the slider itself is transparent (the background should be visible through it), and the slider track is visible? Is it possible to limit css here?
Here's what I tried to do: Example in codepen
Red background is the parent box, the background.
It turned out to make the slider transparent, but how to make the track visible is now a problem.

Answer 1

Here's what I have in my notes about it

//Gecko
::-moz-range-track {}
::-moz-range-thumb {}

//
::-ms-fill-lower: часть полоски, по которой ездит ползунок, под/перед самим ползунком.
::-ms-fill-upper: Часть полоски, по которой ездит ползунок, над/после самого ползунка.
::-ms-ticks-before: Область над/перед полоской ползунка с делениями.
::-ms-ticks-after: Область под/после полоски ползунка с делениями.
::-ms-thumb: Сам ползунок
::-ms-track: Полоска ползунка
::ms-tooltip: Всплывающая подсказка, которая появляется во время того, как пользователь выбирает значение в селекторе ползунка. Заметьте, что этот элемент не может быть стилизован, а только скрыт при помощи display: none. :)

//webkit
::-webkit-slider-runnable-track для полоски 
::-webkit-slider-thumb для самого ползунка.