Как сделать прозрачный ползунок в input type="range"?

Question

[ascold2013]

Здравствуйте!
Подскажите - как можно стилизовать ползунок в слайдере, чтобы сам background ползунка был прозрачный (через него должен быть виден фон), а трэк слайдера - видимый? Можно л тут ограничиться css?
Вот что попробовал я сделать:Пример в кодепене
Красный фон - это родительский блок, фон.
Ползунок сделать прозрачным получилось, а вот трек как сделать видимым - теперь проблема.

Answer 1

[Александр Алексеев]

вот что у меня в записях по этому поводу

//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 для самого ползунка.