Как изменить цвет, размер и форму элементов в ползунке диапазона? ⇐ CSS

[Anonymous]

У меня нет опыта программирования или веб-разработки. После нескольких часов исследований в Google я написал набор (отлично работающих) кодов для создания ползунка диапазона с помощью HTML, CSS и JS.
Я Я использую этот ползунок для изменения громкости мультимедиа на своем смартфоне в этой панели управления мультимедиа, созданной с помощью приложения Android под названием Tasker. Мой слайдер работает, но я хочу внести в него некоторые косметические изменения.
Может ли кто-нибудь помочь мне реализовать следующее в моем коде?

• Цвет/градиент части ползунка перед большим пальцем.
• Цвет/градиент ползунка часть после большого пальца.
• Размер, форма, цвет и непрозрачность большой палец.

Это текущий код. Не стесняйтесь редактировать это.

Код: Выделить всё

.container{
display:flex;
width:100%;
padding-top:5
}

#volm{
-webkit-appearance: none;
background-color: magenta;
border-radius: 2px;
width:153px;
height:5px;



var slider = document.getElementById("volm");
slider.addEventListener("input",function()
{
performTask("WebView Slider - Media Volume",1,slider.value,)}, false);

Подробнее здесь: https://stackoverflow.com/questions/709 ... nge-slider