재구성된 제목: 상자 그림자에만 오버플로 효과를 적용하는 방법

Question

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

본체 {
    내용 정당화: 센터;
    항목 정렬: 중앙;
    최소 높이: 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
    

Answer 1

도움이 될지 모르겠지만 제가 수행한 리팩토링은 다음과 같습니다. 아마도 귀하의 작업에 맞게 약간의 수정을 가할 수 있을 것입니다.

HTML

으아악

CSS

으아악

JS

으아악

원하는대로 조절하시면 됩니다. 도움이 되었기를 바랍니다.