Стилизация input type range
Работал над стилизацией этого элемента, столкнулся с проблемой, что нужно сделать progress линию слева от ползунка оранжевого цвета, использовать box-shadow я не могу, так как не могу поставить на input overflow: hidden, у меня кружок thumb вылазит за блок, это его обрежет, без overflow тень превращается в кошмар Вот код который работает сейчас :
#radius,
#radius-2 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 4px;
background-color: transparent;
border: none;
border-radius: 4px;
background-image: linear-gradient(
to right,
#f2622d 0%,
#f2622d 50%,
transparent 50%,
transparent 100%
);
background-size: 200% 100%;
background-position: right;
transition: background-position 0.3s ease;
}
#radius:hover,
#radius-2:hover {
background-position: left;
}
#radius::-webkit-slider-thumb,
#radius-2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background-color: #f2622d;
border: 0px solid #f2622d;
border-radius: 50%;
height: 18px;
width: 18px;
margin-top: -7px;
}
#radius::-moz-range-thumb,
#radius-2::-moz-range-thumb {
-moz-appearance: none;
appearance: none;
background-color: #f2622d;
border: 0px solid #f2622d;
border-radius: 50%;
height: 18px;
width: 18px;
margin-top: -7px;
}
#radius::-webkit-slider-runnable-track,
#radius-2::-webkit-slider-runnable-track {
height: 4px;
border: 0px solid #fff;
box-shadow: 0px 0px 0px #353535;
background: #d7d7d7;
}
Источник: Stack Overflow на русском