Есть ли способ заставить ползунок переполняться, не позволяя его тени переполняться? ⇐ CSS

[Anonymous]

Итак, я работаю над настройкой ползунков диапазона для своего веб-сайта. Единственный известный мне способ добавить разные цвета для обеих сторон ползунка — это добавить тень к большому пальцу, а затем скрыть переполнение. однако я хотел сделать большой палец больше, чем полоса, но я не могу сделать это, не отключив переполнение, из-за которого тень выходит за пределы рамки.
Я попробовал повернуть переполнение отключено только для большого пальца и включение переполнения только для тени, но ни то, ни другое не работает. ниже показано, как выглядит мой код.
HTML:

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

50

CSS:

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

.customRange {
-webkit-appearance: none;
background-color: #F998F6;
height: 20px;
overflow: hidden;
width: 400px;
border-radius: 50px;
}

.customRange::-webkit-slider-thumb {
-webkit-appearance: none;
background: #92008D;
border-radius: 50%;
box-shadow: -210px 0 0 200px #DD00D6;
cursor: pointer;
height: 20px;
width: 20px;
border: 0;
}

Может быть, есть другой способ добавить два разных цвета для разных сторон, потому что тогда я мог бы включить переполнение, но понятия не имею.


Подробнее здесь: https://stackoverflow.com/questions/791 ... its-shadow