입력 범위 슬라이더 막대를 만들려고 하는데 문제가 발생했습니다.

본체 { 내용 정당화: 센터; 항목 정렬: 중앙; 최소 높이: 100vh; 배경: #151515; } #범위값 { 위치: 상대; 디스플레이: 블록; 글꼴 크기: 6em; 색상: #999; 글꼴 두께: 400; } .범위 { 배경: 선형 그라데이션(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !중요; 너비: 400px; 높이: 5px; -웹킷 모양: 없음; 배경: #111; 개요: 없음; 테두리 반경: 15px; 상자 그림자: 삽입 0 0 5px rgba(0, 0, 0, 1); } .range::-webkit-slider-thumb { -웹킷 모양: 없음; 너비: 15px; 높이: 15px; 테두리 반경: 50%; 배경: 파란색; 커서: 포인터; 상자 그림자: -507px 0 0 500px 빨간색; }

 0 
     
 
문제는 그릴 때 이 큰 빨간색 영역이 입력 슬라이더 내에 남아 있기를 원한다는 것입니다. 유일한 해결책은 overflow:hidden을 .range에 적용하는 것입니다. 하지만 파란색 점 버튼이 사라집니다. overflow:hidden을 box-shadow에 적용할 수 있는 방법이 있나요? 아니면 작동하게 만드는 다른 방법에 대한 단서가 있나요? 
 
최종 결과는 다음과 같습니다 =>
 
 
감사합니다.