Исправлено отображение ползунка диапазона типа ввода ⇐ CSS

[Anonymous]

Несколько дней назад я попросил помощи в оформлении элемента диапазон типов ввода. Все работает отлично, кроме одного. Ползунок слайдера отображается неправильно.
Моя цель — отобразить его вот так.


Но это самое близкое к моей цели, которое я могу сделайте.


С этим ползунком есть две проблемы. Как вы можете видеть, он обрезан и не выделяется, как на моей картинке. Я знаю, что это вызвано переполнением: скрыто. Но это переполнение: скрыто существует намеренно, потому что именно такой подход я получил в качестве совета по моему последнему вопросу. Следующая проблема связана с цветом и тенью ползунка. Я переключил его на красный, чтобы он был более заметен, когда я пытался решить первую проблему. Но если я снова переключу его на белый и попытаюсь добавить к нему тень блока, чтобы добиться эффекта, который находится на целевом изображении, он перезапишет старую тень блока, что сделает этот белый выбранным. эффект.


Кто-нибудь сталкивался с такой проблемой или есть другое решение? Спасибо

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

body{
background:#ccc;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type='range'] {
width: 100%;
-webkit-appearance: none;
background-color: #ee7b82;
border-radius: .3em;
position: relative;
}

input[type='range']::-webkit-slider-runnable-track {
height: .35em;
border: none;
border-radius: 3px;
color: white;
overflow: hidden;
}

input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: ew-resize;
box-shadow: -100em 0 0 100em white;
-webkit-appearance: none;
border: none;
height: 1.1em;
width: 1.1em;
border-radius: 50%;
background:red;

/*
Box-shadow to slider thumb,when color is changed to white,so it'll be visible, but it rewrites old box-shadow ,which is making that selected effect.

background: white;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
*/
margin-top: -.2em;
}

input[type=range]:focus {
outline: none;
}
}

/*MOZ*/
input[type="range"]::-moz-range-progress {
background-color: white;
}

input[type="range"]::-moz-range-track {
background-color: #ee7b82;
}

/*IE*/
input[type="range"]::-ms-fill-lower {
background-color: white;
}

input[type="range"]::-ms-fill-upper {
background-color: #ee7b82;
}

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

        
HEIGHT


WEIGHT

Подробнее здесь: https://stackoverflow.com/questions/635 ... isplay-fix